What contrast ratio is required by WCAG?

WCAG 2.1 sets two thresholds. AA - the most common legal floor - requires 4.5:1 for normal text and 3:1 for large text (18 pt+, or 14 pt+ bold). AAA bumps these to 7:1 and 4.5:1. Non-text UI components and graphical objects need 3:1 against their immediate neighbour.

How is the ratio actually computed?

It's the ratio of relative luminance: (L_lighter + 0.05) / (L_darker + 0.05). Luminance is a weighted sum of the gamma-corrected RGB channels (0.2126 R + 0.7152 G + 0.0722 B). The +0.05 padding handles pure-black backgrounds gracefully. The result lives between 1:1 (identical colours) and 21:1 (black on white).

What counts as 'large text'?

WCAG defines large text as 18 pt and up, OR 14 pt and up when bold. That's roughly 24 px / 18.66 px in CSS pixels when rendered at the default 96 dpi. Large text only needs 3:1 (AA) or 4.5:1 (AAA) because larger glyphs are easier to read at lower contrast - thin small text needs more separation.

Does the ratio change in dark mode?

Yes - it depends only on the actual rendered colours, so you have to check both modes. A `#475569` on `#ffffff` passes AA (6.5:1), but if your dark-mode token swaps to `#475569` on `#0f172a`, you're at 1.6:1 and failing badly. Test both surfaces; that's the whole reason designers ship light + dark colour tokens, not a single shared palette.

What about anti-aliased text or background images?

WCAG's ratio assumes flat colours. For text over a background image, audit the worst-case pixel under the text (usually the lightest spot for dark text). For text with a translucent backplate or text-shadow, compute the ratio against the effective rendered colour. Most tools - including this one - check flat colour pairs only; image-aware audits need a separate tool or manual inspection.

Is passing WCAG enough for accessibility?

Contrast is necessary but not sufficient. You also need readable font choices, semantic HTML, alt text, keyboard support, focus indicators (which themselves need 3:1 contrast against the background), and so on. Contrast is the easiest accessibility test to automate, which is why it gets disproportionate attention - but it's one of many.

Verificador de contraste

Verificador de contraste WCAG com proporção ao vivo, selos AA/AAA e texto de exemplo.

Roda no seu navegador

Escolha uma cor de primeiro plano e outra de fundo. A proporção atualiza ao digitar, e quatro selos indicam se o par passa em WCAG AA e AAA para texto normal e grande. O texto de exemplo aparece nos tamanhos reais da spec (14 pt regular, 14 pt bold = grande, 18 pt = grande) para conferir visualmente, não só pelo número.

Primeiro plano

Fundo

Texto de exemplo

Texto corrido a 14 pt regular - teste mais rigoroso para contraste de texto normal.

Texto corrido a 16 pt regular - tamanho padrão do navegador.

Texto grande em negrito a 14 pt - conta como «grande» pela WCAG.

Texto grande a 18 pt regular - limite «texto grande» WCAG.

Título - 24 pt, espaço de sobra para respirar.

Proporção de contraste

14.68:1

AA texto normal (4,5:1)Aprovado
AA texto grande (3:1)Aprovado
AAA texto normal (7:1)Aprovado
AAA texto grande (4,5:1)Aprovado

Como usar

Pick the colours
Use the foreground and background pickers, or paste hex values directly. The ratio updates live.
Read the badges
Four badges show pass/fail for AA-normal, AA-large, AAA-normal, AAA-large. The badges that matter depend on your text size.
Try the swap
Click swap to flip foreground and background - useful when designing reversed states (filled buttons, inverted callouts).
Eyeball the samples
Sample text renders at the actual WCAG sizes. If the ratio passes but the text looks rough, your font is too thin - try a heavier weight.

O que é?

A contrast checker computes the WCAG contrast ratio between two colours - usually text on its background - and reports whether the pair meets each WCAG level. The ratio is the ratio of relative luminances (a perceptual measure of brightness), padded so the formula behaves at the extremes. Higher is more readable; 4.5:1 is the WCAG AA floor for normal body text, 7:1 the AAA floor.

Quando usar

Vetting every text-on-background pair in a design system, auditing colours against legal accessibility requirements (Section 508 in the US, EN 301 549 in the EU, AODA in Ontario), choosing brand colours that survive both light and dark themes, picking focus-ring colours that hit 3:1 against the surrounding UI, validating chart colours against gridlines, and double-checking a chosen palette before shipping.

Erros comuns

Testing only the brightest version of a colour token (the dark-mode swap often fails). Treating 3:1 as 'good enough' for body text - that's the large-text threshold; small body text needs 4.5:1. Forgetting that disabled-text exemptions exist in WCAG but don't help end users - if disabled text can't be read, your form is broken. Approving colour pairs from a screenshot - JPEG compression shifts hues; always test the actual hex values from the design tokens.

FAQ

What contrast ratio is required by WCAG?: WCAG 2.1 sets two thresholds. AA - the most common legal floor - requires 4.5:1 for normal text and 3:1 for large text (18 pt+, or 14 pt+ bold). AAA bumps these to 7:1 and 4.5:1. Non-text UI components and graphical objects need 3:1 against their immediate neighbour.
How is the ratio actually computed?: It's the ratio of relative luminance: (L_lighter + 0.05) / (L_darker + 0.05). Luminance is a weighted sum of the gamma-corrected RGB channels (0.2126 R + 0.7152 G + 0.0722 B). The +0.05 padding handles pure-black backgrounds gracefully. The result lives between 1:1 (identical colours) and 21:1 (black on white).
What counts as 'large text'?: WCAG defines large text as 18 pt and up, OR 14 pt and up when bold. That's roughly 24 px / 18.66 px in CSS pixels when rendered at the default 96 dpi. Large text only needs 3:1 (AA) or 4.5:1 (AAA) because larger glyphs are easier to read at lower contrast - thin small text needs more separation.
Does the ratio change in dark mode?: Yes - it depends only on the actual rendered colours, so you have to check both modes. A `#475569` on `#ffffff` passes AA (6.5:1), but if your dark-mode token swaps to `#475569` on `#0f172a`, you're at 1.6:1 and failing badly. Test both surfaces; that's the whole reason designers ship light + dark colour tokens, not a single shared palette.
What about anti-aliased text or background images?: WCAG's ratio assumes flat colours. For text over a background image, audit the worst-case pixel under the text (usually the lightest spot for dark text). For text with a translucent backplate or text-shadow, compute the ratio against the effective rendered colour. Most tools - including this one - check flat colour pairs only; image-aware audits need a separate tool or manual inspection.
Is passing WCAG enough for accessibility?: Contrast is necessary but not sufficient. You also need readable font choices, semantic HTML, alt text, keyboard support, focus indicators (which themselves need 3:1 contrast against the background), and so on. Contrast is the easiest accessibility test to automate, which is why it gets disproportionate attention - but it's one of many.