Check the contrast ratio between two colors and see whether it passes WCAG AA and AAA, live in your browser.
Contrast ratio is the number WCAG uses to decide whether text is readable. It compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (pure black on pure white). At level AA, WCAG asks for at least 4.5:1 for normal text and 3:1 for large text; level AAA raises those to 7:1 and 4.5:1. Interface components — icon buttons, input borders, focus rings — need 3:1 against whatever sits next to them.
The math is not a simple difference in brightness. Each sRGB channel is linearised first: divided by 12.92 below the 0.03928 threshold, otherwise normalised and raised to the power 2.4. This step exists because screen values are gamma-encoded and are not proportional to emitted light. The linear channels are then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue, reflecting how much each primary contributes to perceived brightness — green dominates by a wide margin. Finally the two luminances go into (L1 + 0.05) / (L2 + 0.05), where the 0.05 term models the light a real screen reflects even while showing black. That constant is why black on white is exactly 21:1 instead of infinite.
Use it before shipping, because brand palettes fail more often than people expect. A mid gray like #777777 on white lands at 4.48:1 — comfortable on a bright monitor, one hundredth short of the AA threshold, and a genuine problem on a phone in sunlight. The suggestion button targets exactly that case: it walks the text color's HSL lightness up and down in half-percent steps and stops at the first value reaching 4.5:1, keeping the hue and saturation you chose. One honest limit: the ratio measures luminance only, so it says nothing about hue confusion for color-blind readers and nothing about font weight beyond the large-text rule. Everything runs locally in your browser.
Relative luminance: for each sRGB channel c normalised to 0–1, use c / 12.92 when c ≤ 0.03928 and ((c + 0.055) / 1.055)^2.4 otherwise; then L = 0.2126·R + 0.7152·G + 0.0722·B. Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two colors. Thresholds: 4.5:1 normal text AA, 7:1 normal text AAA, 3:1 large text AA and UI components, 4.5:1 large text AAA.
Text at 18pt (24px) or larger, or 14pt (about 18.7px) or larger when bold. Large text only needs 3:1 at AA and 4.5:1 at AAA, because thicker, bigger letterforms stay legible at lower contrast.
Because the threshold is a hard cut. #777777 on white gives 4.48:1 and AA requires 4.5:1, so it fails by two hundredths. Darkening it one step to #767676 reaches 4.54:1 and passes — that is exactly what the suggestion button does.
Yes. WCAG success criterion 1.4.11 requires 3:1 between a user interface component or a meaningful graphic and its adjacent colors. Input borders, toggle states, focus indicators and icon-only buttons all fall under it.
This tool implements the WCAG 2.x ratio, which is what accessibility laws, audits and design systems currently reference. APCA is the perceptual algorithm proposed for WCAG 3; it produces different numbers and is not yet a conformance requirement.
No. The luminance and the ratio are computed in JavaScript on your device. Nothing is sent to any server or stored anywhere.
Vai.la turns any URL into a short link with click statistics, QR Code and your own biolink.
Vai.la is not responsible for how the tools are used or for decisions made based on their results.