Contrast Checker
Test text and background color combinations against WCAG 2.1 AA and AAA standards. Live sample text preview at three sizes plus a UI-component test. Every accessible product needs this check for every color pair.
Large text — 18pt bold or 24px+ normal.
Normal body text — the default paragraph size (usually 16px).
Small text — often used for captions, labels, and metadata. Test this carefully.
About Contrast Checker
Every accessible product needs to pass WCAG color contrast requirements — the ratio between text color and background color that determines whether users with low vision, color blindness, or common age-related vision decline can read comfortably. This Contrast Checker computes the WCAG 2.1 contrast ratio between two colors and shows pass/fail badges for all five relevant thresholds: AA normal text (4.5:1), AA large text (3:1), AAA normal (7:1), AAA large (4.5:1), and UI component (3:1).
The live preview renders sample text at three sizes on the chosen background so you can see the actual readability, not just the number. Common brand-color trap: your primary brand color often passes on white but fails on light gray, and vice versa — this tool makes the failure visible so you catch it before shipping. Combine with a color palette generator to build accessible design systems from the ground up.
How to Use
Pick foreground (text) and background colors with the color pickers or type HEX codes.
The ratio appears immediately, plus pass/fail badges for each WCAG threshold.
Preview shows sample text at three sizes — check the small text is legible before shipping.
Use Swap to test the reverse combination (dark bg + light text).
Frequently Asked Questions
What is the minimum contrast ratio for accessibility?
WCAG 2.1 Level AA (industry minimum): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). Level AAA (higher bar): 7:1 for normal, 4.5:1 for large. UI components (buttons, form borders) need 3:1 against adjacent colors.
What counts as 'large text'?
18pt (24px) or larger for regular weight, OR 14pt (18.66px) or larger for bold weight. Large text has less strict contrast requirements because the shape is easier to distinguish even at lower contrast.
Does this test against low-vision users?
WCAG 2.1 AA is designed to work for users with mild-to-moderate vision loss, including presbyopia (age-related decline) and mild color blindness. AAA is stricter, better for severe low vision. For users with severe vision impairments, screen readers matter more than contrast — but never skip contrast checks.
What about brand colors that fail?
Common trap: your brand blue passes on white but fails as text on light-gray. Solutions: (1) use the brand color only for large text, headings, or logos. (2) create a darker variant specifically for body text. (3) use the brand color as background with white text.