Why do large text and small text have different thresholds?

Bigger, bolder strokes stay legible at lower contrast than fine detail does, so WCAG sets a lower bar for text it defines as 'large': 18pt (24px) regular weight, or 14pt (18.66px) bold. Everything smaller than that needs 4.5:1 for AA; large text only needs 3:1. This page shows live samples at both sizes so the difference is something you can see, not just a number.

Why can't I check a translucent color without giving a backdrop?

A translucent background has no contrast ratio on its own — rgba(0,0,0,.6) as a background is 60% black and 40% of whatever is behind it, and 'whatever is behind it' changes the answer, so this page asks for the surface it actually sits on before composting it. A translucent foreground over an opaque background doesn't have that problem: the opaque background already is the backdrop, so this page answers that pair directly, composited against the background you gave it. Ignoring alpha entirely and just running the math on the color as typed, which is what most contrast checkers do, silently answers a question you didn't ask — this page only asks for more information when the question is genuinely undefined.

What is APCA, and why isn't it the pass/fail here?

APCA is a newer perceptual contrast model, and it's genuinely a better predictor of real-world legibility than WCAG 2's formula — in particular it's much closer to correct in dark mode, where WCAG 2 is known to both pass pairs that are hard to read and fail pairs that read fine. But WCAG 3, the standard meant to formalize a model like it, had its contrast algorithm pulled from the draft in 2023 and isn't expected before 2028, and every accessibility law in force today points at WCAG 2.x. So APCA shows here as secondary context — worth reading, never the verdict — and this implementation hasn't been checked against an independent reference, which the page says plainly rather than implying more confidence than it has.

How does the 'nearest passing color' fix work?

It moves only the OKLCH lightness of the color you're fixing, in the direction away from the other color, until the pair reaches whichever threshold you pick from the repair-target dropdown — AA or AAA, normal or large text, or the UI-component bar — holding hue and chroma fixed the whole way. That's different from most 'suggest a fix' tools, which search RGB space and can hand back a different hue entirely. Adopting a fix keeps the color's alpha unchanged — only lightness moves. If no lightness on that hue reaches the threshold against the fixed color, the page says so instead of returning something that still fails.

If a pair passes WCAG AA, is it actually readable?

Usually, but not guaranteed. WCAG 2's formula is a widely-used proxy, not a measurement of legibility — it's known to be unreliable for thin fonts, and its accuracy gets worse specifically in dark mode, where it can pass pairs that are genuinely hard to read. Treat a pass as 'meets the standard', not as 'definitely readable', and check the live sample text above rather than trusting the ratio alone.

This tool runs entirely in your browser. Nothing you paste is uploaded.

How you can check →

Color Contrast Checker

Color & Design

Check any foreground/background pair against WCAG AA and AAA, in your browser — composite alpha against a real backdrop, and get a fix that keeps the same hue.

Foreground and background

Any CSS color syntax — hex, rgb(), hsl(), oklch(), a named color. Results update as you type.

Foreground (text)

Background

Contrast ratio

—

AA · normal text (≥ 4.5:1)

—

AA · large text (≥ 3:1)

—

UI components (≥ 3:1)

—

AAA · normal text (≥ 7:1)

—

AAA · large text (≥ 4.5:1)

—

The ratio above is truncated, never rounded up — a pair at 4.4999:1 will never show as "4.50" beside a pass.

Aa Sample text 16px normal

Aa Sample 24px normal (large)

Aa Sample 18.66px bold (large)

Repair — nearest passing color

Moves only OKLCH lightness toward the threshold below, holding hue and chroma fixed, so the result is recognizably the same color. "Adopt" keeps the color's alpha — only lightness moves.

Repair target

Nearest passing foreground

—

Nearest passing background

—

A failing pair is often exactly what a scale generator ramp is for — a tint or shade of the same brand color that already passes.

APCA (secondary, non-normative)

—

Need to convert a color first, or see its contrast against plain black and white? Use the color converter.

WCAG 2 contrast, and the two thresholds

WCAG 2's contrast ratio compares the relative luminance of two colors — a linearized, weighted sum of their red, green and blue channels — as (L1 + 0.05) / (L2 + 0.05), lighter color first. It ranges from 1:1 (identical) to 21:1 (black on white). The pass thresholds are 4.5:1 for normal text at AA and 7:1 at AAA, 3:1 for large text at AA and 4.5:1 at AAA, and 3:1 for UI components and graphical objects (SC 1.4.11) — five separate thresholds, which is why this page shows all five verdicts rather than just one.

Why large text gets a lower bar

WCAG defines "large text" as 18pt (24px) at regular weight, or 14pt (18.66px) bold — and gives it a lower bar, 3:1 for AA instead of 4.5:1, because bigger, bolder strokes stay legible at lower contrast than fine detail does. The three live samples above render at exactly those sizes against your two colors, so the difference is something you can see rather than a number you have to trust.

A translucent color has no contrast ratio on its own

rgba(0,0,0,.6) is 60% black and 40% of whatever is behind it — the ratio is undefined until you say what that is. Most contrast checkers accept an rgba() value and quietly run the math on it as typed, silently ignoring the alpha. This page detects alpha below 1 on either color, asks for the backdrop it's actually composited against, and shows the fully opaque color it judged rather than pretending the translucent value has a ratio by itself.

Never trust the rounded number

#9a6c5a and #7c7290, each measured against white, both round to the identical displayed ratio — 4.50:1 — at two decimal places. But #9a6c5a actually sits at 4.4999998:1 and fails AA, while #7c7290 sits at 4.5000006:1 and passes. Across every one of the 16,777,216 possible sRGB colors measured against white, 942 round to "4.50" while actually failing, and 381 round to "7.00" while actually missing AAA. This page evaluates the verdict at full floating-point precision and only truncates — never rounds — the number it displays, so a pair that fails can never show a rounded-up pass.

APCA: shown, not the verdict

APCA is a newer, generally more accurate model of perceived contrast, and it is particularly better than WCAG 2 in dark mode — WCAG 2's formula is known to both pass some genuinely hard- to-read dark-mode pairs and fail some that read fine, because it was tuned against light-mode reading conditions. But WCAG 3, the standard meant to formalize a model like it, had its contrast algorithm withdrawn from the draft in mid-2023 and is not expected before 2028, and every accessibility law and procurement standard currently in force points at WCAG 2.x. APCA appears here as labelled, secondary context — worth reading before you ship a dark theme, never the pass/fail this page prints.

How the repair works

The nearest-passing suggestion moves only the OKLCH lightness of the color being fixed — hue and chroma stay exactly where you set them — searching outward from the current lightness until the pair reaches whichever of the five thresholds you pick as the repair target. That is different from tools that search RGB space for a passing color, which can hand back a different hue than the brand color you started with. Adopting a suggestion keeps the color's alpha unchanged, since only lightness moved. When no lightness on that hue can reach the threshold against a fixed partner color, the page says so instead of returning a color that still fails.

Common use cases

Checking a brand text color against a background before it ships
Verifying a semi-transparent overlay against the page it actually sits on
Getting a same-hue fix for a pair that fails, instead of guessing a new color by eye
Confirming large-text and UI-component thresholds separately from body text
Sanity-checking a dark-mode pair, with the honest note on WCAG 2's known weakness there

Frequently asked questions

Why do large text and small text have different thresholds?: Bigger, bolder strokes stay legible at lower contrast than fine detail does, so WCAG sets a lower bar for text it defines as 'large': 18pt (24px) regular weight, or 14pt (18.66px) bold. Everything smaller than that needs 4.5:1 for AA; large text only needs 3:1. This page shows live samples at both sizes so the difference is something you can see, not just a number.
Why can't I check a translucent color without giving a backdrop?: A translucent background has no contrast ratio on its own — rgba(0,0,0,.6) as a background is 60% black and 40% of whatever is behind it, and 'whatever is behind it' changes the answer, so this page asks for the surface it actually sits on before composting it. A translucent foreground over an opaque background doesn't have that problem: the opaque background already is the backdrop, so this page answers that pair directly, composited against the background you gave it. Ignoring alpha entirely and just running the math on the color as typed, which is what most contrast checkers do, silently answers a question you didn't ask — this page only asks for more information when the question is genuinely undefined.
What is APCA, and why isn't it the pass/fail here?: APCA is a newer perceptual contrast model, and it's genuinely a better predictor of real-world legibility than WCAG 2's formula — in particular it's much closer to correct in dark mode, where WCAG 2 is known to both pass pairs that are hard to read and fail pairs that read fine. But WCAG 3, the standard meant to formalize a model like it, had its contrast algorithm pulled from the draft in 2023 and isn't expected before 2028, and every accessibility law in force today points at WCAG 2.x. So APCA shows here as secondary context — worth reading, never the verdict — and this implementation hasn't been checked against an independent reference, which the page says plainly rather than implying more confidence than it has.
How does the 'nearest passing color' fix work?: It moves only the OKLCH lightness of the color you're fixing, in the direction away from the other color, until the pair reaches whichever threshold you pick from the repair-target dropdown — AA or AAA, normal or large text, or the UI-component bar — holding hue and chroma fixed the whole way. That's different from most 'suggest a fix' tools, which search RGB space and can hand back a different hue entirely. Adopting a fix keeps the color's alpha unchanged — only lightness moves. If no lightness on that hue reaches the threshold against the fixed color, the page says so instead of returning something that still fails.
If a pair passes WCAG AA, is it actually readable?: Usually, but not guaranteed. WCAG 2's formula is a widely-used proxy, not a measurement of legibility — it's known to be unreliable for thin fonts, and its accuracy gets worse specifically in dark mode, where it can pass pairs that are genuinely hard to read. Treat a pass as 'meets the standard', not as 'definitely readable', and check the live sample text above rather than trusting the ratio alone.

Color Converter

Convert HEX, RGB, HSL, OKLCH, CMYK and more — and see which values survive the trip back.

Color Scale Generator

Turn one seed color into a 50–950 tint/shade ramp with even OKLCH steps, an explicit chroma taper, and a contrast matrix.

CSS Gradient Generator

Build linear, radial and conic CSS gradients, and see the same stops fade through grey in sRGB or stay vivid in OKLCH.