Contrast Checker

What Contrast Ratio Means

It compares how much light two colours reflect. Each colour is converted to a relative luminance, a single number describing its brightness to the human eye. The lighter of the two, plus 0.05, is divided by the darker, plus 0.05. Those small additions stop the formula misbehaving at the extremes.

The scale runs from 1:1 to 21:1. Identical colours give 1:1 and are completely unreadable. Pure black on pure white gives 21:1, the theoretical maximum. Everything useful sits in between, and most well designed body text lands somewhere between 7:1 and 16:1.

Green counts for more than red or blue. The formula weights green at roughly 72 percent, red at 21 and blue at 7, reflecting how sensitive human vision is to each. This is why a saturated blue on black is far harder to read than the raw numbers might suggest.

Hue is irrelevant to the calculation. Only brightness matters. Two colours can be wildly different hues and still fail, which is exactly why red text on a green background of similar luminance is so hard to read.

How to Check a Colour Pair

Enter your two colours. Use the swatches to open your system picker, or type hex codes directly. Three and six digit codes both work and the hash is added for you.

Read the ratio and the five verdicts. The large number is the exact ratio. The cards beneath it cover AA and AAA for normal and large text, plus a separate check for interface components, which follows a different rule.

Look at the preview, not just the numbers. The panel shows real sentences at both sizes along with an outlined and a solid button, so you can see what the ratio actually feels like rather than trusting a figure alone.

Swap and copy. Swap Colors exchanges foreground and background, which is handy when checking both a light and a dark theme. Copy Report puts the full result on your clipboard as plain text, ready for a ticket or a design review.

AA, AAA and the Thresholds

Level AA is the working standard. It requires 4.5:1 for normal text and 3:1 for large text. This is what accessibility legislation around the world generally points at, and what most organisations adopt as their internal bar.

Level AAA is the higher bar. It asks for 7:1 for normal text and 4.5:1 for large text. WCAG itself notes that AAA is not achievable for all content, so it is usually treated as an aspiration rather than a blanket requirement, though it is worth meeting for long form reading.

Level A has no contrast requirement at all, which surprises people. Contrast enters the guidelines at AA, so claiming Level A compliance says nothing about readability.

The thresholds are minimums, not targets. A ratio of 4.51:1 technically passes but leaves nothing in reserve for a dim phone screen in daylight. Aiming comfortably above the line costs little and helps a great deal.

What Counts as Large Text

The definition is specific. Large text means at least 18.66 pixels when bold, or at least 24 pixels at normal weight. Anything below that is normal text and must meet the higher 4.5:1 threshold.

Weight can change the category. Bold text at 19 pixels qualifies as large, while the same size at regular weight does not, because thicker strokes remain legible at lower contrast.

Do not lean on the exemption. Headings usually pass comfortably anyway, and the text that most needs help is body copy, captions and form labels, none of which qualify as large. Designing a whole interface to the 3:1 line because the headings are big is a mistake.

Buttons, Borders and Icons

Non text elements have their own rule. WCAG 2.1 requires 3:1 for interface components and meaningful graphics against adjacent colours. That covers input borders, focus rings, toggle states, chart lines and icons that carry meaning.

Faint borders are the classic failure. A very light grey outline on white is a popular look and routinely lands near 1.5:1, leaving the boundary of a form field invisible to many users. The field still works, but only if you can find it.

Focus indicators matter most of all. Anyone navigating by keyboard depends on seeing where focus is. A focus ring that fails contrast makes an interface effectively unusable without a mouse.

Purely decorative graphics are exempt. If removing an image would lose no information, it does not need to meet the ratio. The test is whether it conveys something.

Fixing a Failing Combination

Change lightness, not hue. Contrast depends on brightness alone, so darkening or lightening the text keeps your brand colour recognisable while moving the ratio. That is exactly what the suggestion in this tool does.

Consider moving the background instead. If a brand colour must stay exactly as it is, a slightly darker or lighter surface behind it often solves the problem with less visual disruption than changing the text.

Increase size or weight. Pushing text to 24 pixels, or 18.66 bold, drops the requirement from 4.5:1 to 3:1. For a heading or a call to action this is often the most elegant fix.

Reserve pale brand colours for large areas. A light tint may be perfect as a section background or an illustration accent while being quite unusable for body text. Not every colour in a palette has to work everywhere.

Why This Is Often a Legal Duty

Accessibility rules increasingly cite WCAG directly. The European Accessibility Act, the Web Accessibility Directive for public sector bodies, Section 508 in the United States and equivalent rules elsewhere all reference WCAG AA as the benchmark.

Contrast is among the most commonly reported failures, partly because it is simple to test automatically. Scanning tools flag it immediately, which makes it a frequent starting point for complaints and audits.

It is also cheap to fix. Unlike restructuring markup or adding keyboard support, adjusting a colour value takes minutes. Of everything on an accessibility checklist, contrast usually offers the best ratio of effort to benefit.

What the Ratio Does Not Cover

Passing is not the same as readable. A thin, low weight typeface at 12 pixels can clear 4.5:1 and still be a struggle. Size, weight, letter spacing and line height all shape legibility, and none appear in the formula.

Text over images is not measurable this way. A photograph has many luminances, so contrast changes across the image. Use a solid overlay, a gradient scrim or a text shadow, and test against the lightest region the text crosses.

Colour blindness is a separate concern. Two colours can have excellent contrast and still be indistinguishable to someone with a colour vision deficiency. Never rely on hue alone to carry meaning; add a label, an icon or a pattern.

The formula is known to be imperfect. It underestimates difficulty for some dark theme combinations, which is why newer research such as APCA exists. WCAG 2.1 remains the standard that regulations reference today, so it is what this tool measures.

Common Mistakes to Avoid

Judging contrast on a good monitor in a dark room. Your working conditions are better than most people's. Measure the ratio rather than trusting how it looks on your desk.

Forgetting placeholder text and disabled states. These are usually the palest text in an interface and are almost always overlooked. Placeholder text carrying real instructions needs to pass like any other text.

Testing only the light theme. A dark theme is a separate set of colour pairs and needs its own check. Use Swap Colors as a quick first look at the inverse.

Treating semi transparent colours as solid. A colour at fifty percent alpha blends with whatever is behind it. Work out the resulting blended colour and test that instead.

Frequently Asked Questions