WCAG Contrast Ratio Checker
Check color contrast ratios against WCAG 2.1 AA and AAA standards. Ensure your text, buttons, and UI elements are accessible to all users.
Low contrast text is one of the most common accessibility issues on the web — and one of the most invisible to the people who created it, because good monitors and young eyes compensate for contrast problems that real users with visual impairments, older monitors, or bright sunlight conditions experience acutely. Checking contrast before shipping is a 30-second fix to a real barrier.
WCAG Contrast Requirements
The Web Content Accessibility Guidelines define contrast ratio requirements based on text size and importance:
| WCAG Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | N/A |
UI components — buttons, input borders, icons — only need 3:1 contrast against their adjacent color. The 4.5:1 rule is for text.
How Contrast Ratio Is Calculated
The ratio is calculated from the relative luminance of the two colors:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter color's luminance and L2 is the darker. Luminance is computed from the gamma-corrected RGB values. Pure white has luminance 1.0, pure black has 0.0. The maximum possible ratio is 21:1 (black on white).
The CalcHub Contrast Checker handles this math: enter foreground and background colors in any format, and it returns the ratio, the WCAG level achieved, and suggestions for adjusted colors that meet the next level.
Common Color Combinations and Their Ratios
| Combo | Ratio | AA Normal | AA Large |
|---|---|---|---|
| Black (#000) on White (#FFF) | 21:1 | Pass | Pass |
| Gray (#767676) on White | 4.54:1 | Pass | Pass |
| Light gray (#aaa) on White | 2.32:1 | Fail | Fail |
| Blue (#3B82F6) on White | 3.77:1 | Fail | Pass |
| Dark blue (#1D4ED8) on White | 7.21:1 | Pass | Pass |
| White on Blue (#3B82F6) | 3.77:1 | Fail | Pass |
| White on Dark Blue (#1D4ED8) | 7.21:1 | Pass | Pass |
Checking Text on Images and Gradients
Text overlaid on images or gradients is tricky because the background varies across the text. Best practice:
- Add a semi-transparent overlay (dark or light) before placing text
- Measure contrast against the overlay color at the opacity you're using
- Use the overlay's resulting luminance for the contrast calculation
Tips
- Don't assume dark = accessible. A dark purple (#4B1D5A) on a dark blue (#0D1B2A) has very low contrast even though both colors are dark. Contrast is about the difference between colors, not their individual darkness.
- Placeholder text needs contrast too. WCAG requires input placeholder text to meet 4.5:1 against the input background. Light gray placeholders on white inputs commonly fail.
- Disabled states get an exemption. WCAG explicitly exempts "inactive user interface components" from contrast requirements. Disabled buttons with low contrast are technically compliant.
- Icons without text labels need 3:1. If your icon conveys meaning without accompanying text, it's a UI component and needs 3:1 against its background.
What's the easiest way to fix a failing color combination?
The CalcHub checker's "suggest fix" feature adjusts lightness in OKLCH to find the nearest passing color while preserving hue and saturation. Usually this means darkening a light color or lightening a dark color by 10–15% lightness points.
Is WCAG 2.1 AA compliance a legal requirement?
In many jurisdictions, yes. US federal websites must comply with Section 508, which requires WCAG 2.1 AA. The EU Web Accessibility Directive requires AA for public sector sites. Increasingly, private sector companies face legal risk if their products are inaccessible to users with disabilities. Beyond legal compliance, good contrast simply makes your product better.
Does contrast ratio account for color blindness?
Partially. WCAG contrast ratio uses luminance, which is based on the brightness perception of the human visual system independent of color discrimination. A high contrast ratio is generally accessible even with color vision deficiencies. However, if you're conveying information by color alone (red = error, green = success with no other indicator), that's a separate issue that contrast ratio doesn't address.
Related Calculators
- Color Blindness Simulator — test beyond contrast for full color accessibility
- Color Palette Generator — build accessible palettes from the start
- Typography Scale Calculator — proper font sizing pairs with contrast for readability