All Tools About
← Back to all tools
⚖️

Color Contrast Checker

Check WCAG AA/AAA contrast ratio between two colors

Large text sample
The quick brown fox jumps over the lazy dog. Normal body text size 15px.
Contrast ratio
0.00:1

About Color Contrast Checker

Check whether the contrast between a foreground color and a background color meets the Web Content Accessibility Guidelines (WCAG) standards. The tool computes the exact contrast ratio using the official WCAG 2.1 formula (relative luminance with sRGB gamma correction) and grades the result as AA, AAA, or Fail for three common use cases: normal body text (minimum 4.5:1 for AA, 7.0:1 for AAA), large text of 18 point or greater (minimum 3.0:1 for AA, 4.5:1 for AAA), and UI components and graphical objects (minimum 3.0:1).

A live preview shows exactly how the color pair looks on real text, so you can fine-tune both colors with the color pickers or type HEX values directly. Designers and developers use this tool to validate brand palettes, audit existing websites for accessibility issues, and choose color combinations that remain legible for users with low vision or color-vision deficiency.

Frequently Asked Questions

What is the WCAG contrast formula? +
Contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter relative luminance and L2 is the darker one. Luminance uses a standardized sRGB transfer function applied to the red, green, and blue channels.
What scores do I need to pass WCAG? +
AA: 4.5:1 for normal text, 3.0:1 for large text (18pt or 14pt bold) and UI. AAA (stricter): 7.0:1 for normal text, 4.5:1 for large text. Government and enterprise sites often require AA as a minimum.
Does contrast matter only for people with visual impairments? +
No. Good contrast benefits everyone — reading on a phone in bright sunlight, on a projector in a lit room, or after a long tired day. Accessibility wins are universal wins.
Is my color data sent anywhere? +
No. Everything is calculated in your browser with simple math. Nothing is logged.
Can I check gradient or semi-transparent colors? +
Not directly. Pick the most extreme endpoints of your gradient, or resolve the transparency against the background first, then test those solid colors.