Color Contrast Checker
Check color contrast
Preview
Sample Text
Small text sample for AA/AAA testing
WCAG Results
Frequently Asked Questions
What is color contrast ratio?
Contrast ratio measures the luminance difference between two colors, ranging from 1:1 (no contrast) to 21:1 (black on white). It is calculated using relative luminance values: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
What contrast ratio does WCAG require?
WCAG 2.1 Level AA: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). Level AAA: 7:1 for normal text, 4.5:1 for large text. The checker shows pass/fail status for each level.
Why does color contrast matter for accessibility?
Low contrast makes text difficult to read for people with low vision, color blindness, or in bright sunlight. Approximately 1 in 12 men and 1 in 200 women have color vision deficiency. Good contrast benefits all users.
How do I fix a failing contrast ratio?
Darken the text color or lighten the background (or vice versa). The checker suggests the nearest color that passes WCAG requirements. Small adjustments often suffice — changing #777 gray to #595959 on white improves ratio from 4.48:1 to 7:1.
Does contrast ratio apply to non-text elements?
WCAG 2.1 guideline 1.4.11 requires 3:1 contrast for UI components (buttons, form fields, icons) and graphical objects. This ensures interactive elements are visible to all users. The checker validates both text and non-text contrast.