Verificador de Contraste de Cores
Verifique as taxas de contraste WCAG 2.1 para pares de cores de primeiro plano/fundo e obtenha resultados de aprovação/reprovação instantaneamente.
Sobre esta ferramenta
Insira uma cor de primeiro plano e uma de fundo usando seletores de cores hexadecimais ou campos de texto. A ferramenta calcula a taxa de contraste WCAG 2.1 e mostra crachás de aprovação/reprovação para todos os quatro limites: AA Texto normal (4,5:1), AA Texto grande (3:1), AAA Texto normal (7:1) e AAA Texto grande (4,5:1). Uma visualização ao vivo renderiza texto de amostra em tamanhos normal e grande com as cores escolhidas. A luminância relativa de cada cor também é exibida. Se as cores atuais falham no AA, a ferramenta sugere cores ajustadas (escurecidas ou clareadas) que atendem ao padrão.
Como usar
- 1 Escolha uma cor de primeiro plano usando o seletor de cores ou digite um valor hexadecimal.
- 2 Escolha uma cor de fundo da mesma forma.
- 3 Leia a taxa de contraste e verifique quais níveis WCAG passam ou falham.
- 4 Veja a visualização de texto ao vivo e use as cores sugeridas se necessário para alcançar a conformidade AA.
Why contrast is an accessibility requirement, not a preference
Text that is too close in brightness to its background is hard to read — and for people with low vision, color blindness, or anyone using a phone in bright sunlight, it can be unreadable. The Web Content Accessibility Guidelines (WCAG) turn "readable enough" into a measurable number called the contrast ratio, ranging from 1:1 (foreground and background identical) to 21:1 (pure black on pure white). This tool computes that ratio for any two colors and tells you which WCAG levels they pass, so design decisions stop being guesswork.
The formula, step by step
The contrast ratio is not based on the raw HEX values — it is based on how bright each color appears to the human eye. The calculation has three stages, exactly as WCAG defines it:
- Linearize each channel. Each of the red, green, and blue values (0–255) is divided by 255 and then "gamma-corrected" to undo the non-linear way screens encode brightness. Small values are scaled by 12.92; larger ones use
((v + 0.055) / 1.055)^2.4. - Compute relative luminance. The three linear channels are weighted by how sensitive our eyes are to each:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B. Green dominates because the eye is most sensitive to it, which is why two colors with the same "lightness" can have very different luminance. - Form the ratio. With the lighter luminance
L1and darkerL2, the ratio is(L1 + 0.05) / (L2 + 0.05). The+ 0.05accounts for ambient screen glare so the result never divides by zero.
A worked example
Take a common case: gray text #777777 on a white background #FFFFFF. White has a relative luminance of 1.0. Mid-gray #777777 works out to about 0.18. The ratio is (1.0 + 0.05) / (0.18 + 0.05) ≈ 4.56:1. That just clears the AA threshold for normal text (4.5:1) — so this gray is acceptable for body copy, but only barely, and it fails the stricter AAA level (7:1). Darkening the text to #595959 would push it comfortably above AA.
The WCAG thresholds the tool checks
| Level | Minimum ratio | Applies to |
|---|---|---|
| AA Large | 3:1 | Text ≥ 18pt, or ≥ 14pt bold |
| AA Normal | 4.5:1 | Body text — the everyday standard |
| AAA Large | 4.5:1 | Large text, enhanced level |
| AAA Normal | 7:1 | Body text, enhanced level |
"Large" text gets an easier threshold because bigger letters are legible at lower contrast. AA is the level most laws and corporate standards require; AAA is a stretch goal for maximum accessibility.
The automatic suggestion feature
When a pair fails AA normal, the tool searches for a fix. It nudges the foreground darker one step at a time, recomputing the ratio until it crosses 4.5:1, and separately tries lightening the background and lightening the foreground. It then offers the nearest passing colors with their resulting ratios — a practical shortcut when you want to keep your palette close to the original while making it compliant.
Tips and common mistakes
- Contrast is independent of hue. Two vivid colors — say red on green — can look "high contrast" yet have a low luminance ratio and be miserable to read. Always trust the number, not the visual punch.
- Test text over its real background. If text sits on an image or a gradient, check it against the lightest and darkest points it overlaps, not an average.
- Don't rely on color alone. Meeting the ratio helps everyone, but for users who cannot distinguish certain hues, pair color with another cue like an icon or underline.
- Placeholder and disabled text still matter. Faint gray placeholders frequently fail AA. If they convey real information, they need to meet contrast too.
- Larger isn't a loophole. The 3:1 "large text" allowance only applies above the size threshold — shrinking that heading back to body size re-imposes the 4.5:1 rule.
Privacy
The luminance and ratio math runs entirely in your browser. The colors you enter are never sent anywhere, the live preview updates locally, and the tool works with your network disconnected.