Comment en Vérifier Color Contrast pour Accessibility

问题

You besoin en ensure texte est readable against its background, meeting WCAG accessibility standards.

Prérequis

• Understanding of WCAG
• Knowledge of color contrast ratios

Étapes

1. 1. Understand WCAG thresholds

   WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (Level AA). Level AAA requires 7:1 for normal text and 4.5:1 for large text. The ratio ranges from 1:1 (no contrast) to 21:1 (black on white).

   entrée

   AA: 4.5:1 normal, 3:1 large

   输出

   thresholds defined

2. 2. Compute the contrast ratio

   Calculate the relative luminance of each color, then compute the ratio: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter and L2 is the darker luminance. Relative luminance accounts for human perception, weighting green more than red and blue.

   entrée

   foreground: #777777, background: #FFFFFF

   输出

   ratio: 4.48:1

3. 3. Evaluate and adjust

   Compare the ratio to the WCAG threshold. If it fails, darken the foreground or lighten the background. Use a contrast checker tool to find compliant color pairs. Document the compliance level (AA or AAA) for your design system.

   entrée

   ratio 4.48 < 4.5

   输出

   FAIL AA — darken text to #767676

Résultat attendu

Un contrast ratio measurement et passer/échouer verdict against WCAG thresholds.

Erreurs courantes

Checking only one color pair

Check all text-background combinations in your design, including hover states, disabled text, and placeholders. Each must meet the threshold.

Ignoring non-text elements

WCAG also requires 3:1 contrast for UI components like icons and borders. Check these in addition to text.

Dépannage指引

• If the ratio is close to the threshold, test with actual users or accessibility tools.
• Remember that large text (18pt+ or 14pt+ bold) has a lower threshold (3:1 for AA).

Limites de sécurité

• Color contrast is an accessibility requirement, not a security measure. Poor contrast affects usability for all users.