How to use the Color Contrast Checker
- Choose the text color and background color with the pickers or type HEX codes such as #1a2b3c.
- The contrast ratio appears in large type, for example 4.5 : 1. A higher number is easier to read.
- Check the chips below for AA and AAA results for normal text, large text and UI components, and look at the live sample.
How it works — Color Contrast Checker
The Web Content Accessibility Guidelines (WCAG) define the contrast ratio from the relative luminance of two colors. Each red, green and blue value is converted to a 0 to 1 range, the gamma correction is removed, and the results are weighted by 0.2126, 0.7152 and 0.0722 and added to give relative luminance. The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, so black on white gives the maximum of 21 : 1. Normal text needs at least 4.5 : 1 for level AA and 7 : 1 for level AAA, while large text (18pt or larger, or 14pt bold) needs 3 : 1 for AA and 4.5 : 1 for AAA. User interface parts such as button borders and icons should reach 3 : 1.
Why contrast matters
Low-contrast text is hard to read even for people with good eyesight in sunlight or on a bright screen, and nearly unreadable for people with age-related vision changes, low vision or color vision deficiency. Light gray text and white text on a pastel background are classic problems. As more public and corporate websites follow accessibility guidelines, designers and developers need to check contrast before release. The easiest fix is a darker text color or a lighter background.
Tips
- Treat 4.5 : 1 as the minimum for body text.
- Do not rely on color alone to convey meaning; add icons or text.
- Check both light and dark themes.
- For text over photos, add a semi-transparent dark layer behind it because the background varies.
Notes & limitations
This checker only calculates the ratio between two colors. It does not account for font weight and size, background images or surrounding colors, and it is not a legal certification. For important services also use real user testing and dedicated accessibility tools.
FAQ
What is the difference between AA and AAA?
Both are accessibility levels and AAA is stricter. Normal text needs 4.5 : 1 for AA and 7 : 1 for AAA.
Why is the bar lower for large text?
Large or bold text is easier to recognize, so the requirement is relaxed to 3 : 1 for AA and 4.5 : 1 for AAA.
Can I use 3-digit HEX codes?
Yes. A code like #fff is expanded to six digits before calculating.