How to use the Contrast Checker
- Enter the text color and the background color as HEX, rgb(), hsl() or a CSS name, or pick them with the swatches.
- Read the contrast ratio and the pass or fail result for AA and AAA, for normal text, large text and UI components.
- Check the live sample to see how body text, headings, a button and icons look in those colors.
- If a check fails, choose a target and press Use on a suggested color that keeps your hue but passes.
Features
- Exact WCAG 2.x contrast ratio, never rounded up
- AA and AAA results for normal and large text
- Non-text contrast check for UI components and icons
- Live preview of text sizes, a button and icons
- Nearest passing text or background color
- Handles transparent colors by blending them first
Why contrast matters
Text that is too close in brightness to its background is hard to read for people with low vision or color vision deficiency, for older readers, and for everyone on a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) set measurable minimums, and many accessibility laws and standards, including US Section 508 and the European standard EN 301 549, point to WCAG for what counts as accessible.
How the ratio is calculated
First each color’s relative luminance is worked out. The red, green and blue channels are converted from their 0–255 values to linear light, then combined with weights that reflect how sensitive the eye is to each: L = 0.2126 R + 0.7152 G + 0.0722 B. Green counts most and blue least. The contrast ratio is then (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter color. Results run from 1:1 (identical colors) to 21:1 (black on white).
WCAG does not allow rounding up: a ratio of 4.499:1 fails a 4.5:1 requirement. This checker truncates to two decimals so a borderline result is never shown as a pass.
The thresholds
| Content | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | – |
Large text means at least 18 point (24 CSS pixels) at regular weight, or 14 point (about 18.66 pixels) in bold. UI components covers the visible boundaries of buttons and inputs, focus indicators, icons and the parts of charts needed to understand them. Logos, purely decorative elements and disabled controls are exempt.
Worked example
The mid-gray #767676 on white has a luminance of about 0.181 against 1.0 for white, giving (1.05) ÷ (0.231) = 4.54:1, a pass for AA body text. One step lighter, #777777 drops to 4.48:1 and fails. That tiny difference is why designers check instead of guessing.
How the suggestions work
When a pair fails, the checker keeps the hue and saturation of your color and changes only its lightness, searching for the smallest change that reaches your target. It offers both a new text color and a new background, so you can keep whichever color is more important to your brand. Darkening text on a light background is usually the least noticeable fix.
Tips
- Check every state: hover, focus, visited links, placeholder text and error messages often fail when the default state passes.
- Text on images and gradients needs checking against its lightest area. A dark overlay from the CSS Gradient Generator helps.
- Color should never be the only signal. Pair red and green states with icons or text.
- A newer method called APCA is being explored for a future WCAG 3, but WCAG 2.x ratios remain the standard that audits and regulations use today.
Frequently asked questions
What contrast ratio do I need?
For WCAG AA, 4.5:1 for normal text and 3:1 for large text and UI components. For AAA, 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text at least 18 point (24px) in regular weight, or at least 14 point (about 18.66px) in bold.
Why does 4.49:1 fail when it is so close to 4.5?
WCAG thresholds are strict minimums and must not be rounded up, so anything below 4.5:1 fails the AA requirement for normal text.
Do logos and disabled buttons need to pass?
No. WCAG exempts logotypes, decorative content and inactive (disabled) controls from the contrast requirements.
How are transparent colors handled?
A semi-transparent text color is blended onto the background first, and a semi-transparent background is blended onto white. The ratio uses the resulting solid colors, shown under the results.
Which color should I change to fix a failing pair?
Usually the text color, since small lightness changes to text are hard to notice. The suggestions show both options so you can keep your brand color where it matters most.