Color Accessibility Checker
Enter a foreground and background color (hex codes) to check their contrast ratio and WCAG compliance.
This is large bold text.
This is normal sized text.
21.00:1
Contrast Ratio
Normal Text (AA)
Large Text (AA)
18pt+ or 14pt+ bold
UI Components (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
How to use Color Accessibility Checker
- 1
Enter two colors
Provide a foreground (text) color and a background color as hex codes, for example #1a1a1a and #ffffff.
- 2
Check the contrast
Click Check Accessibility to calculate the contrast ratio between the two colors.
- 3
Review WCAG results
See pass or fail badges for AA and AAA at normal text, large text, and UI component levels, and view the live preview.
- 4
Adjust as needed
Swap the colors or tweak a hex value until the combination meets the WCAG level your project requires.
WCAG Color Contrast, Demystified
What contrast ratio means
Color contrast is expressed as a ratio between the lighter and the darker of two colors, running from 1:1 to 21:1. A ratio of 1:1 means the two colors are identical, so text would be completely invisible against its background, while 21:1 is the maximum, the contrast between pure black and pure white. Every other pairing lands somewhere in between. The ratio is not about which colors you used or how different their hues are; it is purely about their lightness difference, which is why two colors that look distinct to you can still fail.
This single number is the backbone of accessible color, because it predicts whether text will be legible for the widest range of people and conditions. The checker computes it for any foreground and background pair you enter and compares the result against the published thresholds.
The AA thresholds you must hit
WCAG level AA is the bar that most websites aim for and that many accessibility laws and procurement rules reference, so treat it as your baseline. AA requires a contrast ratio of at least 4.5:1 for normal body text and at least 3:1 for large text. Those two numbers cover the bulk of everyday design decisions, and the badges in this tool tell you immediately whether a given pairing clears each one.
If a combination passes AA for both normal and large text, you have a solid, defensible foundation. If it fails normal text but passes large, you can still use it, but only at large sizes, which is a constraint worth deciding deliberately rather than discovering later.
AAA and what large text means
Level AAA is the enhanced tier, intended for maximum readability, and it raises the requirement to 7:1 for normal text and 4.5:1 for large text. AAA is not expected for whole sites and is often impractical for brand palettes, but it is a worthy target for long-form reading, critical content, and audiences with low vision. The checker reports AAA alongside AA so you can see how much headroom a pairing has.
Large text has a precise definition that surprises people: it means roughly 18pt and larger, or 14pt and larger when bold, which translates to about 24px regular or 18.66px bold. The reason the threshold is lower is simply that larger, heavier letterforms stay legible at less contrast. Anything smaller than that boundary must meet the stricter normal-text ratio, so do not assume a big-looking heading qualifies without checking the actual size and weight.
Why contrast matters for real users
Adequate contrast is not a box-ticking exercise; it determines whether real people can use your interface. Users with low vision, which becomes more common with age, rely on it directly, and so does anyone reading a screen in bright sunlight, on a dim or cheap display, or while tired. Contrast also interacts with color vision deficiency: because the ratio is based on lightness rather than hue, a pairing that depends on a red-versus-green difference can collapse for someone who cannot distinguish those hues, while a strong lightness difference still reads.
That last point carries a corollary worth stating plainly: never rely on color alone to convey meaning. Pair color with text, icons, underlines, or shape so that information survives both low contrast and color blindness.
How the ratio is computed
The math behind the badge starts with relative luminance, a measure of how bright each color appears to the human eye. It is not a flat average of the red, green, and blue channels, because the eye is far more sensitive to green than to blue, so green is weighted most heavily and blue least. Each channel is also passed through a small gamma correction first so the result tracks perception rather than raw signal.
Once both colors have a luminance value, the contrast ratio is the lighter luminance plus a small constant, divided by the darker luminance plus that same constant. The constant keeps the formula well behaved near black. You do not need to run this by hand, but knowing that luminance, not hue, drives the outcome explains why merely picking colors that look different is not enough.
Non-text and UI contrast
Contrast rules are not limited to text. WCAG also sets a 3:1 minimum for the visual boundaries of interactive components and meaningful graphics, what the checker flags under UI components. That covers the border of a text input, the outline of a button, the check inside a checkbox, focus indicators, and the parts of an icon or chart a user must perceive to understand it. A faint gray input border on a white card is a classic failure of this rule, even when the label text inside passes easily.
Designing controls to clear 3:1 against their surroundings means people can actually find and operate them, not just read the words next to them. Test the component's edges and states, not only its text.
Common failures and how to fix them
A few patterns fail again and again. Light gray placeholder or secondary text on white is the most common; values like a mid gray near #999999 on white fall below 4.5:1 and need to be darkened. Brand colors are another repeat offender, especially mid-tone blues, greens, and oranges used for body text or for white text on a colored button, where the pairing often lands just short of AA. Thin light borders on light backgrounds routinely miss the 3:1 UI threshold as well.
The fixes are usually small. Darken the foreground or lighten the background until the ratio clears the line, which in HSL terms often means adjusting lightness by a modest amount while keeping the hue intact so the brand still reads. For text on a busy image or gradient, add a solid or semi-transparent scrim behind it so the worst-case region still passes. Enter your real colors here, watch the ratio and the AA and AAA badges update, and nudge the values until every level your project requires turns green.
Frequently asked questions
What is a contrast ratio and what counts as good?
What is the difference between AA and AAA?
Why does large text pass when normal text fails?
What color format should I enter?
Is the checker free and does it send my colors anywhere?
Related tools
Keep going with these handy tools