What this tool does
Contrast ratio compares the relative luminance of a foreground and background. WCAG uses this ratio for text and also defines a separate 3:1 requirement for many user-interface components and graphical objects.
Enter the values in the calculator above and choose Calculate. The calculation runs in your browser; the inputs are not intentionally sent to a Colormapped application server.
How it works
- Convert each sRGB channel to linear-light values using the WCAG transfer function.
- Combine linear red, green, and blue with the WCAG relative-luminance coefficients.
- Put the lighter luminance above the darker one in (L1 + 0.05) / (L2 + 0.05).
- Compare the ratio with the relevant text-size or non-text requirement for your use case.
Worked example
Input
#111827 on #FFFFFFOutput
17.74:1This pair comfortably exceeds AA and AAA text thresholds. The tool still cannot decide whether color is being used as the only cue for meaning.
When to use it
- Check body text and headings against their actual backgrounds.
- Validate dark-mode and light-mode text pairs.
- Screen candidate brand colors before assigning them to text or controls.
Accuracy and limits
- Contrast ratio alone is not a complete accessibility audit.
- Text size/weight, UI-component rules, focus states, gradients, transparency, and color-independent cues still matter.