Color Converter
JA

Contrast Ratio Checker

Check the contrast ratio between foreground and background colors against WCAG 2.1 standards.

12.63:1
PASSAA Normal Text4.5:1
PASSAA Large Text3:1
PASSAAA Normal Text7:1
PASSAAA Large Text4.5:1

Normal text (16px) — The quick brown fox jumps over the lazy dog

Large text (24px) — Color Converter

Small text (12px) — Disclaimer: Actual colors may vary depending on your monitor

WCAG 2.1 Contrast Ratio Standards

  • AA Normal Text: Contrast ratio of 4.5:1 or higher required
  • AA Large Text: Contrast ratio of 3:1 or higher (18pt+, or 14pt bold+)
  • AAA Normal Text: Contrast ratio of 7:1 or higher required
  • AAA Large Text: Contrast ratio of 4.5:1 or higher

Maintaining proper contrast ratios between text and background is essential for web accessibility. WCAG 2.1 is an accessibility guideline developed by the W3C and is adopted as the standard in many regulations and guidelines worldwide.

What a contrast ratio actually measures

Contrast ratio is a single number that tells you how different two colors are in brightness — specifically, how readable text in one color is over a background of the other. It runs from 1:1, where the two colors are identical and the text is invisible, up to 21:1, which is pure black on pure white.

The number is not based on how different the hues look but on relative luminance, a weighted measure of how much light each color sends to your eye. Green contributes the most to perceived brightness, red less, and blue the least, which is why two colors that feel very different can still fail if their luminance is too close.

The WCAG levels in plain English

The Web Content Accessibility Guidelines (WCAG 2.1, from the W3C) set the targets most accessibility laws and design systems reference. There are two levels — AA is the common baseline, AAA is the stricter goal — and the bar changes depending on text size:

  • AA, normal text: at least 4.5:1. This is the level you should aim to clear for ordinary body copy.
  • AA, large text: at least 3:1. Large text is roughly 24px and up, or 18.66px and up if it is bold.
  • AAA, normal text: at least 7:1 — a high bar that is great for long reading or low-vision audiences.
  • AAA, large text: at least 4.5:1.

Why large text gets an easier pass

It might seem odd that big text is allowed lower contrast, but it makes sense: thicker, larger letterforms have more pixels doing the work, so the eye can read them comfortably even when the brightness difference is smaller. Thin, small text has far less to grab onto, so it needs the extra contrast to stay legible.

This is why the same color pair can pass for a headline but fail for fine print. When you check a combination, always think about the smallest, lightest-weight text it will be used for, not just the big, bold version that looks fine.

How to fix a pairing that fails

When a combination comes up short, you usually do not need to throw out your colors — you just need to push them apart in luminance. Darkening the text or lightening the background (or both) raises the ratio without necessarily changing the hue you picked.

When this checker finds a failing pair, it suggests the nearest color that clears the AA bar, so you can keep your design intent while landing on something readable. Apply it, eyeball it, and adjust from there. Often a small shift is all it takes to go from failing to comfortably passing.

Why any of this is worth the effort

Roughly one in twelve men and a smaller share of women have some form of color vision deficiency, and far more people deal with glare, aging eyes, cheap screens, or simply reading on a phone in bright sunlight. Good contrast helps every one of them, not just users with diagnosed impairments.

On top of the accessibility win, readable text keeps people on your page longer and is increasingly expected by procurement rules and platform guidelines. Checking contrast takes seconds and quietly improves the experience for everyone who visits.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG AA?
For normal body text you need at least 4.5:1. For large text — roughly 24px and up, or 18.66px and up when bold — the requirement drops to 3:1. These are the AA targets that most accessibility rules reference.
What counts as "large text"?
Large text is about 24px (18pt) or bigger, or 18.66px (14pt) or bigger if it is bold. Because larger and heavier letters are easier to read, they are allowed a lower contrast ratio than small body text.
What is the difference between AA and AAA?
AA is the common baseline that most websites aim for, while AAA is a stricter goal that improves readability for low-vision users and long-form reading. AA normal text needs 4.5:1; AAA normal text needs 7:1. Meeting AA is usually the practical target, with AAA as a bonus where you can reach it.
My colors fail the contrast check. How do I fix them?
Increase the difference in brightness between the two colors by darkening the text, lightening the background, or both. You often do not need to change the hue — just push the luminance apart. This checker also suggests the nearest passing color so you can keep your design intent.
Why is contrast based on luminance instead of how different the colors look?
Readability depends on the difference in light each color sends to your eye, not on hue. Green looks brighter than blue at the same numeric value, so two colors can look very different yet still have similar luminance — and fail. Measuring luminance reflects how legible the text actually is.
Why does text contrast matter so much?
Around one in twelve men have some color vision deficiency, and far more people face glare, aging eyes, low-quality screens, or bright sunlight. Sufficient contrast keeps text readable for all of them, improves engagement, and is increasingly required by accessibility laws and platform guidelines.