CalcOpenly
Français

Color contrast checker (WCAG 2.2)

Check the WCAG 2.2 contrast ratio between a text color and its background, with AA and AAA pass or fail for normal text, large text and UI parts.

Mis à jour Exemples vérifiés : 5

#RRGGBB, a CSS name, rgb(), hsl() or oklch().
Essayer
Contrast ratio
:1
Contrast ratio: 14.67 :1
Décimales : 2 ; Vers zéro
AA normal text (≥ 4.5:1)
Réussi
AA large text (≥ 3:1)
Réussi
AAA normal text (≥ 7:1)
Réussi
AAA large text (≥ 4.5:1)
Réussi
UI components (≥ 3:1)
Réussi
Text luminance
0.0215
Background luminance
1.0000

#1F2937 on #FFFFFF has a contrast ratio of 14.67:1, which passes AA normal text, AA large text, AAA normal text, AAA large text and UI components.

#1F2937 text on #FFFFFF

Normal text, 16 px: the quick brown fox jumps over the lazy dog

Large text, 24 px (18 pt): the quick brown fox jumps over the lazy dog

Large bold text, 19 px (14 pt): the quick brown fox jumps over the lazy dog

Where the ratio falls

ÉchecLargeAAAAA134.572114.67:1
Comment le calcul est effectué S

  1. Linearise each channel

    Clin={C/12.92C≤0.04045((C+0.055)/1.055)2.4otherwisetext (R,G,B)lin=(0.0137,0.0222,0.0382)\begin{aligned} C_{lin} &= \begin{cases} C/12.92 & C \le 0.04045 \\ ((C + 0.055)/1.055)^{2.4} & \text{otherwise}\end{cases} \\ \text{text } (R, G, B)_{lin} &= (0.0137, 0.0222, 0.0382) \end{aligned}

    WCAG's text prints 0.03928 as the threshold, the older sRGB draft value; for 8-bit colors both thresholds give identical results because no 8-bit value falls between them.

  2. Relative luminance

    Ltext=0.02153,Lbackground=1.00000L_{text} = 0.02153,\quad L_{background} = 1.00000

  3. Contrast ratio (lighter over darker)

    1.00000+0.050.02153+0.05=14.6791\frac{1.00000 + 0.05}{0.02153 + 0.05} = 14.6791

    Compared with the thresholds unrounded: 4.5 for normal text at AA, 3 for large text and UI parts, 7 and 4.5 at AAA.

À propos de Color contrast checker (WCAG 2.2)

WCAG measures contrast as (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker color. Each luminance comes from the linearized sRGB channels, weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue, so the ratio runs from 1:1 for identical colors to 21:1 for black on white.

Designers and developers check it before shipping text, buttons and icons. The default, #1F2937 slate text on a white background, measures 14.67:1 and passes all five checks, while #777777 on white measures 4.48:1, just under the 4.5:1 that AA needs for normal text.

The ratio is truncated to two decimals and compared unrounded, as WCAG requires, so 4.499:1 fails the 4.5:1 threshold. Alpha is ignored; blend a semi-transparent color onto its background first.

Exemples détaillés

Black on white is the maximum

Text color
#000000
Background color
#FFFFFF
Contrast ratio
21.00 :1
AA normal text (≥ 4.5:1)
Réussi
AAA normal text (≥ 7:1)
Réussi

Source de vérification : WCAG 2.2 definition: (1 + 0.05) / (0 + 0.05) = 21

#777777 on white just misses AA

Text color
#777777
Background color
#FFFFFF
Contrast ratio
4.48 :1
AA normal text (≥ 4.5:1)
Échec
AA large text (≥ 3:1)
Réussi
UI components (≥ 3:1)
Réussi

Source de vérification : Python 3.8 decimal: luminance of 0x77 = 0.18447…, (1.05) / (0.23447…) = 4.4781…

#767676 on white passes AA

Text color
#767676
Background color
#FFFFFF
Contrast ratio
4.54 :1
AA normal text (≥ 4.5:1)
Réussi
AAA normal text (≥ 7:1)
Échec
AAA large text (≥ 4.5:1)
Réussi

Source de vérification : Python 3.8 decimal: 1.05 / (0.18116… + 0.05) = 4.5422…

Same color on itself (edge)

Text color
teal
Background color
#008080
Contrast ratio
1.00 :1
AA large text (≥ 3:1)
Échec
UI components (≥ 3:1)
Échec

Source de vérification : WCAG 2.2 definition: (L + 0.05) / (L + 0.05) = 1

Questions

What contrast ratio does WCAG require?

Level AA needs at least 4.5:1 for normal text and 3:1 for large text (success criterion 1.4.3), and 3:1 for user interface components and meaningful graphics (1.4.11). Level AAA raises text to 7:1 and large text to 4.5:1 (1.4.6). Logos, disabled controls and purely decorative text have no requirement. Most laws and procurement rules point to level AA.

What counts as large text in WCAG?

Large text is at least 18 point, or 14 point when bold. In CSS, where 1 pt is 1.333 px, that is 24 px for regular weight and about 18.66 px for bold. W3C's Understanding document puts these at roughly 1.5 em and 1.2 em of default body text, and warns that very thin fonts may need more. Large text only needs 3:1 at AA instead of 4.5:1.

What is the lightest gray text that passes AA on white?

#767676, which gives 4.54:1 on #FFFFFF. One step lighter, #777777, gives 4.48:1 and fails, because WCAG compares the exact ratio with 4.5 and allows no rounding up. For large text you can go much lighter: any gray that reaches 3:1, such as #949494 at 3.03:1, passes AA.

Did WCAG 2.2 change the contrast requirements?

No. WCAG 2.2 became a W3C Recommendation on 5 October 2023 and added 9 success criteria, mainly on focus visibility, target size and authentication, but the contrast criteria 1.4.3, 1.4.6 and 1.4.11 are the same as in WCAG 2.1. A color pair that passed under 2.1 still passes under 2.2, at the same 4.5:1 and 3:1 thresholds.

Does the order of text and background colors matter?

No. The formula always puts the lighter color's luminance on top, so white text on #1F2937 and #1F2937 text on white both measure 14.67:1. What changes is how the pair reads: light text on a dark background can look thinner or bolder depending on the font and screen, so check the actual rendering too, especially at small sizes.

Quelle est la précision de « Color contrast checker (WCAG 2.2) » ?

La précision dépend de vos données et des hypothèses de la méthode. Le calcul décimal utilise 50 chiffres significatifs, mais les estimations, méthodes numériques et données sources peuvent être moins précises ; l’arrondi affiché ne supprime pas ces limites. Exemples résolus vérifiés à partir de sources indépendantes : 5. Par exemple, « Black on white is the maximum » est vérifié à l’aide de WCAG 2.2 definition: (1 + 0.05) / (0 + 0.05) = 21.

D’où vient cette méthode ?

W3C WCAG 2.2 — Success Criteria 1.4.3, 1.4.6 and 1.4.11; definitions of contrast ratio and relative luminance; W3C Understanding SC 1.4.3 — large text is at least 18 pt, or 14 pt bold.

À propos de ce calculateur

ratio=L1+0.05L2+0.05L=0.2126Rlin+0.7152Glin+0.0722Blin\begin{aligned} \text{ratio} &= \frac{L_1 + 0.05}{L_2 + 0.05} \\[4pt] L &= 0.2126 R_{lin} + 0.7152 G_{lin} \\ &\quad + 0.0722 B_{lin} \end{aligned}

Sources

  1. W3C WCAG 2.2 — Success Criteria 1.4.3, 1.4.6 and 1.4.11; definitions of contrast ratio and relative luminance
  2. W3C Understanding SC 1.4.3 — large text is at least 18 pt, or 14 pt bold

Vérifié avec les références

Ce calculateur comprend 5 exemples résolus dont les réponses proviennent de sources indépendantes. Ils font partie de la suite de tests et peuvent aussi être exécutés ici.

Calculatrices associées