TOOLGRID
65 TOOLS

CSS & couleurs

Color Contrast Checker

Check foreground-background color contrast against WCAG 2.1 AA and AAA thresholds for text and UI.

Browser-onlyInstant outputLocal data

Rapport de contraste

17.35:1

Texte normal AA

Validé

Texte normal AAA

Validé

Grand texte AA

Validé

Grand texte AAA

Validé

Composants UI AA

Validé

Pourquoi utiliser cet outil

03

Enter two colors and instantly see the WCAG 2.1 contrast ratio plus pass/fail results for normal text, large text, and non-text UI components.

Color Contrast Checker computes the exact luminance-based contrast ratio between a foreground and background color.

It flags compliance with WCAG 2.1 AA and AAA thresholds for normal text (4.5:1, 7:1), large text (3:1, 4.5:1), and non-text UI (3:1).

Comment l'utiliser

03
01Pick foreground and background colors using the color picker or paste a hex/rgb value.
02Read the ratio and AA/AAA indicators — all thresholds are shown side-by-side.
03Press Swap colors to quickly invert and re-check.

Vérifications rapides avant de copier

03

Confirm the input is the format you intended.

Scan the result before using it in a document, URL, config, or message.

Copy only the output you need.

FAQ

03
What's the difference between AA and AAA?

AA is the baseline required by most accessibility regulations. AAA is a stricter enhanced level. For normal text, AA is 4.5:1 and AAA is 7:1; for large text, AA is 3:1 and AAA is 4.5:1.

What counts as large text?

WCAG defines large text as at least 18pt (24px) regular, or 14pt (18.66px) bold. Anything smaller falls under the normal text thresholds.

How is the ratio calculated?

We follow WCAG 2.1's formula: convert each color to sRGB relative luminance, then compute (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two. The ratio ranges from 1:1 to 21:1.

Outils liés

01

Color Converter

Convert colors between Hex, RGB, HSL, and OKLCH with a live swatch and hue slider.