Free accessibility tool

Color Contrast Checker

Pick a text color and a background color. You get the WCAG contrast ratio, a pass or fail for every AA and AAA check, and a fixed color you can apply in one click if your pair falls short.

Runs in your browser
WCAG 2.2 AA and AAA
No signup needed

Text color

Background color

Type hex (#1A2B3C or 1a2b3c), rgb(26, 43, 60) or hsl(210, 40%, 17%). Press Enter to tidy it into hex.

Contrast ratio

4.54:1

Good, passes AA

WCAG 2.2 contrast results for the current colors
Check	Needs	Result
AA Normal text	4.5:1
AA Large text	3:1
AA UI components & graphics	3:1
AAA Normal text	7:1
AAA Large text	4.5:1

Suggested fix

Closest text color that passes. Same hue, only the lightness changes.

Live preview

Your colors on real interface elements.

Large text, 32px bold

Clear words win attention

Body text, 17px

This is how a normal paragraph reads with your current pair. If it takes effort to read here, it takes more effort on a phone outdoors or on a cheap laptop screen.

Buttons and icons

Get started Learn more

Small text, 13px

Captions, form hints and footnotes often end up this size, so they need the full 4.5:1 even though they look minor.

How it works

Check a color pair in three steps

Paste the two colors you are using, read the table, and fix what fails before it ships.

Pick your colors

Use the picker or paste a value from your CSS or Figma. For text on a button, use the button fill as the background. For text on a photo, use the lightest area behind the words.

Read the results

Body copy needs AA normal text. Headings at 24px and above can use the large text row. Borders, icons and focus rings need the UI components row.

Fix and share

Apply the suggested color if you need one, then copy the link and send it to your designer or developer. The link opens the exact same pair.

The basics

What is color contrast ratio?

Contrast ratio measures how far apart two colors are in brightness. The scale runs from 1:1, where both colors are identical, up to 21:1, which is pure black on pure white. Hue on its own doesn't count. A bright red and a bright green can look very different to you and still sit near 1:1 because their brightness is almost the same. That is exactly the kind of pair people with color vision deficiency find hard to tell apart.

To get the number, each color is turned into its relative luminance. The red, green and blue values are converted from their gamma encoded form into linear light, then weighted by how sensitive the eye is to each one. Green counts the most and blue the least. The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two. The small 0.05 offset stands in for screen glare and room light, which wash out dark colors on a real display.

A higher ratio means text holds up for more people in more conditions: readers with low vision, older eyes, someone on a dim laptop, or anyone reading a phone in direct sun. Good contrast doesn't force a dull design. It means your words stay readable when the conditions aren't ideal, which is most of the time.

The rules

WCAG contrast requirements explained

The Web Content Accessibility Guidelines (WCAG) 2.2 set contrast minimums at two levels. AA is the level most teams aim for and the one usually written into contracts, government rules and accessibility lawsuits. AAA is stricter. It suits long reading, dashboards people look at all day, and sites with an older or low vision audience.

WCAG 2.2 contrast minimums
Level	Applies to	Minimum	Success criterion
AA	Normal text	4.5:1	1.4.3 Contrast (Minimum)
AA	Large text	3:1	1.4.3 Contrast (Minimum)
AA	UI components and graphics	3:1	1.4.11 Non-text Contrast
AAA	Normal text	7:1	1.4.6 Contrast (Enhanced)
AAA	Large text	4.5:1	1.4.6 Contrast (Enhanced)

Large text means 24px or bigger at regular weight, or roughly 18.66px or bigger in bold. UI components and graphics covers anything people need to see to use the page: input borders, checkbox outlines, focus indicators, toggle states and icons that carry meaning. Charts count as well when color is what tells the data apart.

There is no AAA level for non-text contrast, so 3:1 is the top requirement for interface parts. Logos, disabled controls and purely decorative elements have no minimum at all.

Watch out

Common mistakes

These are the contrast problems we see most often when we audit client sites.

Light gray body text

Pale gray on white looks clean in a mockup and fails in real use. #999999 on white is only 2.84:1, well short of 4.5:1.

White text on bright buttons

Orange, yellow, light green and sky blue buttons often fail with white labels. Check button text, not just body copy.

Rounding up

4.48:1 is a fail. The thresholds are hard limits, so don't trust a tool or a gut call that rounds to one decimal.

Text over photos and gradients

Contrast shifts across the image. Test against the lightest spot behind the text, or add a solid overlay.

Placeholder text as a label

Placeholders are styled faint on purpose and disappear once someone types. Put the label above the field instead.

Only checking the default state

Hover, focus, visited and error states each need their own check. Focus rings fall under the 3:1 rule too.

FAQ

Frequently asked questions

What contrast ratio do I need to pass WCAG AA?

Normal body text needs at least 4.5:1 against its background. Large text and meaningful UI parts such as input borders, focus rings and icons need at least 3:1. Most accessibility laws and procurement rules point to AA as the target, so treat 4.5:1 as your default for text.

What counts as large text?

WCAG defines large text as at least 18 point (24px) at regular weight, or at least 14 point (about 18.66px) when bold. Anything smaller is normal text and needs the higher ratio, even if it looks big because of a wide font.

Is 4.49:1 close enough to pass?

No. The thresholds are hard minimums and you should not round up. A pair that measures 4.49:1 fails AA for normal text. This checker cuts the displayed value off at two decimals instead of rounding it, so the number you see never overstates the result.

Do logos, disabled buttons and placeholder text need to meet contrast rules?

Logos and brand wordmarks are exempt, and so are disabled controls and purely decorative elements. Placeholder text is not exempt if it carries information people need, and it often fails because it is styled light gray on purpose. If the hint matters, give it 4.5:1 or move it into a visible label.

Does this tool send my colors anywhere?

No. Every calculation runs in your browser. The only place your colors go is the page address, so you can share a link that opens the same pair. Once the page has loaded, it keeps working without an internet connection.

Want your whole site checked?

Our web team audits contrast, focus states, headings and forms, then fixes what fails. You get a clear list, not a 90 page PDF.

Book a free call