WCAG Color Contrast Checker -- AA and AAA Guide
Why contrast ratios matter
Low-contrast text is one of the most common accessibility failures on the web. When foreground and background colors are too similar, users with low vision, color blindness, or even just a sunny screen cannot read the content. The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios to prevent this.
Beyond accessibility, contrast affects every user. Light gray text on a white background forces squinting regardless of vision quality. Meeting WCAG thresholds is not just a compliance checkbox -- it makes your site more readable for everyone.
The problem is that contrast issues are hard to spot by eye. A color pair might look fine on your calibrated monitor but fail on a cheap laptop screen. You need a tool that calculates the actual ratio and tells you whether it passes.
How to check contrast
- Open the Color Contrast Checker.
- Enter your foreground (text) color as a hex code, RGB, or HSL value.
- Enter your background color in the same format.
- Read the contrast ratio -- it will be a number like 4.5:1 or 7:1.
- Check the pass/fail indicators for WCAG AA and AAA at both normal and large text sizes.
- If you fail, adjust one of the colors until the ratio meets your target level.
WCAG AA vs AAA requirements
WCAG defines two conformance levels for contrast:
- AA (minimum) -- 4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular).
- AAA (enhanced) -- 7:1 for normal text, 4.5:1 for large text.
Most organizations target AA as the baseline. AAA is recommended for body text on content-heavy sites like news, documentation, and government pages. UI components and decorative elements are exempt from these requirements.
The contrast ratio formula
The ratio is calculated as (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter color and L2 is the darker one. Relative luminance accounts for the fact that human eyes are more sensitive to green than red, and more sensitive to red than blue. Each RGB channel is linearized and then weighted: 0.2126 for red, 0.7152 for green, and 0.0722 for blue.
The result is a ratio between 1:1 (identical colors) and 21:1 (pure black on pure white). You do not need to memorize this -- the checker does the math instantly.
How to fix low contrast
When a color pair fails, you have a few options:
- Darken the text -- the simplest fix. Move toward a darker shade while keeping the same hue.
- Lighten the background -- if you cannot change the text color, push the background closer to white.
- Increase font size -- large text has a lower contrast requirement (3:1 for AA), so bumping to 18px bold can turn a fail into a pass.
- Add a text shadow or overlay -- for text on images, a semi-transparent dark overlay behind the text ensures readable contrast regardless of the photo.
Built with vanilla HTML/JS. No frameworks, no backend, loads instantly.