Skip to content
ToolBoxGenie

Color Contrast Checker

Developer Tools · Added 18 August 2026

Enter a text colour and a background and get the WCAG contrast ratio, with a clear pass or fail against every threshold that applies — body text, large text and interface components. Translucent colours are composited before measuring, and when a pair fails, the nearest passing shades in both directions are offered.

Hex, rgb(), hsl() or a CSS colour name.

Alpha on the background is ignored — something opaque is behind it.

Contrast

Contrast ratio

4.54:1

Passes AA for body text. AAA needs 7:1.

Normal body text at 16px — this is what 4.5:1 is measured against.

Large text at 24px bold

Reversed, as a button
Body text (AA)
Pass

Needs 4.5:1

Body text (AAA)
Fail

Needs 7:1

Large text (AA)
Pass

18.66px bold or 24px

Large text (AAA)
Pass

Needs 4.5:1

UI components
Pass

SC 1.4.11 — needs 3:1

Effective text colour
#767676

Colour values

Text — hex
#767676
Text — rgb
rgb(118, 118, 118)
Text — hsl
hsl(0, 0%, 46%)
Background — hex
#ffffff
Background — rgb
rgb(255, 255, 255)

The ratio is the WCAG 2.1 formula, which is what accessibility audits and procurement checks are written against. It is a relative-luminance calculation, not a perceptual model — it is known to be harsh on light text over mid-tone backgrounds and generous the other way. APCA, the replacement being developed for WCAG 3, will eventually change the numbers, but it is not a conformance requirement anywhere yet.

How to use the color contrast checker

  1. 1Enter the text colour as hex, rgb(), hsl() or a CSS colour name — or use the colour picker.
  2. 2Do the same for the background.
  3. 3Read the ratio and the pass or fail against each WCAG threshold.
  4. 4Check the live sample, which shows body text, large text and a reversed button at those colours.
  5. 5If the pair fails, copy one of the suggested shades — same hue, adjusted lightness.

Examples

The classic borderline grey

Input
#767676 text on #ffffff
Result
4.54:1 — passes AA for body text by a hair, fails AAA

#767676 is the lightest pure grey that passes AA on white. Anything lighter fails.

A translucent overlay

Input
rgba(0, 0, 0, 0.5) on #ffffff
Result
Composited to #808080 first — 3.95:1, which fails AA for body text

A failing brand colour

Input
#4a9eff text on #ffffff
Result
2.35:1 — fails everything, with a darker #0a5fbf suggested at 4.5:1

About the color contrast checker

How the ratio is calculated

Each colour channel is normalised to 0–1 and linearised — undoing the gamma encoding that sRGB applies — then weighted 0.2126 red, 0.7152 green, 0.0722 blue to give relative luminance. Those weights reflect how much each primary contributes to perceived brightness, which is why green dominates and blue barely registers.

The ratio is then (lighter + 0.05) ÷ (darker + 0.05). The 0.05 represents ambient light reflecting off the screen, and it is what caps the scale: pure black on pure white gives 21:1, and nothing can exceed it.

Where contrast failures actually come from

Rarely from body text, which most designers check. The usual sources are elsewhere: placeholder text, which is grey by convention and almost always fails; disabled states, which are exempt from the requirement but still need to be perceivable; text over a photograph, where the contrast varies across the image; and brand colours used for links, which were chosen for a logo rather than for reading.

Light-on-dark is its own trap. A colour that passes comfortably as dark text on white frequently fails when the same pair is inverted for dark mode, because the formula is not symmetric. Every pair needs checking in both themes rather than assuming one implies the other.

Fixing a failure without redesigning

The suggestions here adjust lightness while holding hue and saturation, which usually keeps a colour recognisably itself. That is what makes them usable as an actual fix rather than a different palette — a brand blue darkened until it passes is still the brand blue.

Where that is not enough, the other levers are weight and size. Making text bolder raises its perceived contrast without changing the colour, and pushing a heading past 24px moves it to the 3:1 threshold. What does not work is a text shadow: it makes text look more legible in a screenshot and does nothing for the measured ratio or for a user with low vision.

Frequently asked questions

What counts as large text?
18.66px (14pt) and bold, or 24px (18pt) at any weight. Large text needs 3:1 for AA and 4.5:1 for AAA, rather than 4.5:1 and 7:1. The threshold is lower because larger letterforms carry more of the shape information that makes text legible — but the boundary is a cliff, not a slope, and a heading at 23px is held to the body text standard.
What is the 3:1 rule for interface components?
WCAG 2.1 added success criterion 1.4.11, which requires 3:1 contrast for the parts of a control that identify it — a form field border, a toggle, a focus ring, a meaningful icon — against whatever is adjacent. It is the criterion most often missed, because it is not about text at all, and it is why a form with pale grey input borders fails an audit even when every word on the page passes.
Why does the ratio change when I use a transparent colour?
Because the tool composites the foreground over the background before measuring, which is what a viewer actually sees. Measuring rgba(0,0,0,0.5) as if it were solid black would report a ratio nobody experiences and would pass an audit that a real user fails. If the background itself is transparent, its alpha is ignored — something opaque is behind it, and that is what should be entered.
Does the ratio account for colour blindness?
Indirectly. Contrast ratio is a luminance calculation, so it is unaffected by hue — which means a pair that passes will still be distinguishable to someone with any form of colour vision deficiency. What it cannot tell you is whether two colours of similar luminance but different hue can be told apart, which is why WCAG separately requires that colour is never the only way information is conveyed.
Is the WCAG formula accurate?
It is the standard, and it is what audits, procurement requirements and accessibility legislation are written against — so it is the number to report. It is also known to be imperfect: it is harsh on light text over mid-tone backgrounds and generous the other way, because it does not model how perception varies with polarity. APCA, the replacement being developed for WCAG 3, addresses that, but it is not a conformance requirement anywhere yet.
Which conformance level should I aim for?
AA is the level referenced by essentially every legal requirement — the European Accessibility Act, Section 508 in the US, the UK public sector regulations. AAA is a target for specific content rather than whole sites; the WCAG authors themselves note it is not achievable for all content. Meeting AA reliably is worth more than meeting AAA occasionally.

Related tools