Check WCAG 2.2 and APCA contrast. Color-blind simulation, fix suggestions, CSS export — 100% local.
| Text Size | Level | Required | Result |
|---|---|---|---|
| Normal text | AA | 4.5:1 | ✓ Pass |
| Normal text | AAA | 7:1 | ✗ Fail |
| Large text (≥24px / 18.66px bold) | AA | 3:1 | ✓ Pass |
| Large text (≥24px / 18.66px bold) | AAA | 4.5:1 | ✓ Pass |
color: #5b9cff; background-color: #0f1115; /* Contrast ratio: 6.88:1 */
This tool runs 100% in your browser. All computation happens locally on your device — your input is never uploaded to any server. Results are for reference only.
WCAG 2.2 defines contrast as (L₁ + 0.05) / (L₂ + 0.05), where L₁ and L₂ are the relative luminances of the lighter and darker colors. Relative luminance linearizes each sRGB channel (c/12.92 when c ≤ 0.03928, otherwise ((c+0.055)/1.055)^2.4) and blends them as 0.2126R + 0.7152G + 0.0722B. Pass thresholds depend on text size: normal text needs 4.5:1 for AA and 7:1 for AAA, while large text (≥24px, or ≥18.66px bold) only needs 3:1 for AA and 4.5:1 for AAA. The tool computes this ratio live, also reports the APCA Lc perceptual score, simulates protanopia/deuteranopia/tritanopia, and can suggest a passing color.
White on a typical mid-red sits around 2.8:1 — fine for a decorative accent, but far below the 4.5:1 AA floor for body text.
Diego's app uses a red primary button (#ff6b6b) on a white page, and his designer wants to confirm the label passes accessibility standards.
To check contrast: enter foreground and background colors — the tool calculates the WCAG contrast ratio and shows whether it passes AA or AAA accessibility standards.
FreeToolHub Contrast Checker is a free browser-based tool that tests color contrast ratios against WCAG accessibility standards, no signup.
Verifique as taxas de contraste WCAG 2.2 e APCA. Simulação de daltonismo, sugestões de correção automática, exportação CSS. Ferramenta de acessibilidade gratuita — sem cadastro, 100% baseada em navegador.
As Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) 2.2 exigem uma taxa de contraste mínima de 4,5:1 para texto normal e 3:1 para texto grande (18px+ ou 14px+ negrito) no Nível AA. O Nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande. O contraste não conformante torna o conteúdo ilegível para usuários com deficiências visuais e pode resultar em ação legal sob leis de acessibilidade como a ADA.
O APCA (Accessible Perceptual Contrast Algorithm) é um novo modelo de contraste proposto para o WCAG 3.0. Ao contrário da taxa atual do WCAG, que usa uma fórmula simples de luminância, o APCA leva em conta como o olho humano percebe o contraste de forma diferente dependendo do tamanho, peso e polaridade do texto (claro sobre escuro vs escuro sobre claro). Os valores do APCALc variam de 0 a 106+, com 75+ recomendados para texto corporal.
A ferramenta aplica matrizes de transformação de cores científicas para simular como suas cores aparecem para usuários com Protanopia (vermelho-cego, ~1% dos homens), Deuteranopia (verde-cego, ~1% dos homens) e Tritanopia (azul-cego, raro). Isso ajuda você a verificar se seu design é acessível para os ~8% dos homens e ~0,5% das mulheres com deficiências de visão de cores. Se a taxa de contraste simulada cair abaixo de 4,5:1, seu design pode ser inacessível para esses usuários.
O Nível AA do WCAG 2.2 exige uma taxa de contraste mínima de 4,5:1 para texto normal (menos de 18px ou menos de 14px negrito) e 3:1 para texto grande (18px+ ou 14px+ negrito). O Nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande. Esta ferramenta verifica automaticamente os quatro níveis.
O WCAG usa uma fórmula simples de taxa de luminância (0,2126R + 0,7152G + 0,0722B) que pode superestimar o contraste para certos pares de cores. O APCA é um modelo mais recente que leva em conta o contraste perceptivo — como o olho humano realmente percebe diferentes cores — e está sendo considerado para o WCAG 3.0. Esta ferramenta mostra ambas as métricas para que você possa avaliar usando qualquer um dos padrões.
Sim, esta ferramenta aceita os três formatos. Digite "#1a0dab" para HEX, "rgb(26, 13, 171)" para RGB ou "hsl(234, 86%, 36%)" para HSL. Você também pode usar cores nomeadas como "white", "black", "navy", etc. A ferramenta detecta automaticamente o formato e converte entre eles.
Quando sua taxa de contraste falha, a ferramenta sugere automaticamente a cor de aprovação mais próxima. Ela ajusta a luminosidade da sua cor de primeiro plano (preservando matiz e saturação) para encontrar a alternativa em conformidade mais próxima. Clique em "Use" para aplicar a cor sugerida instantaneamente.
Esta ferramenta também é conhecida por estas tarefas — cada link abre a mesma ferramenta com um guia focado:
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.