Vérificateur de Contraste

The Web Content Accessibility Guidelines (WCAG) 2.1, published by the W3C, define minimum contrast ratios to ensure text is readable by people with visual impairments. The guidelines specify three conformance levels: A (minimum), AA (standard), and AAA (enhanced). For Level AA, the requirements are 4.5:1 for normal text (below 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). For Level AAA, the requirements are stricter: 7:1 for normal text and 4.5:1 for large text.

The contrast ratio is calculated using the relative luminance of the two colors. Relative luminance is a weighted sum of the linearized RGB channels: L = 0.2126*R + 0.7152*G + 0.0722*B, where R, G, and B are gamma-corrected values (each channel is linearized by applying: if c <= 0.03928 then c/12.92 else ((c+0.055)/1.055)^2.4). The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color. The 0.05 offset accounts for ambient light flare on the screen.

Ces exigences ne sont pas arbitraires — elles sont basées sur des recherches approfondies sur la vision humaine. Environ 8% des hommes et 0,5% des femmes ont une forme de déficience de la vision des couleurs (daltonisme). Le faible contraste affecte non seulement ces utilisateurs mais aussi quiconque regarde un écran au soleil, sur un écran de mauvaise qualité ou en angle. Respecter les exigences de contraste WCAG AA améliore la lisibilité pour tous, pas seulement pour les utilisateurs handicapés. Dans de nombreuses juridictions (UE, ADA américain), la conformité WCAG est une exigence légale pour les sites web publics.

The most common contrast mistake is using light gray text on a white background. A common design trend uses #999 or #AAA gray text for secondary information, but these colors have contrast ratios of 2.85:1 and 2.32:1 respectively -- well below the 4.5:1 minimum. For secondary text on white, use #767676 (4.54:1) or darker. Another common issue is using brand colors that look good visually but fail contrast checks -- a brand's light blue (#00BFFF) on white has a ratio of 2.32:1, failing WCAG AA. Darken brand colors for text use or use them only for non-text elements (borders, backgrounds, icons).

For large text (headings, buttons), the 3:1 requirement is more forgiving, but don't abuse it. Large text that barely passes 3:1 is still hard to read for many users. Aim for 4.5:1 whenever possible, regardless of text size. When using colored backgrounds, test both the text color and any text that might appear on hover or focus states. CSS custom properties (variables) make it easier to maintain consistent contrast -- define your color palette with contrast-tested pairs and reuse them throughout your design system.