Technology
Pixels and rem conversion
Express a CSS pixel size in rem using the actual root font size.
Calculators / Technology / Text color contrast ratio
Text color contrast ratio calculator
Measure contrast between two opaque sRGB colors using WCAG relative luminance.
On this page
Contrast ratio14.63
Text relative luminance0.02
Background relative luminance1
Calculator controls
How to calculate
Measure contrast between two opaque sRGB colors using WCAG relative luminance.
Contrast ratio =
((0.2126*srgb(r1)+0.7152*srgb(g1)+0.0722*srgb(b1))+(0.2126*srgb(r2)+0.7152*srgb(g2)+0.0722*srgb(b2))+abs((0.2126*srgb(r1)+0.7152*srgb(g1)+0.0722*srgb(b1))-(0.2126*srgb(r2)+0.7152*srgb(g2)+0.0722*srgb(b2)))+0.1)/((0.2126*srgb(r1)+0.7152*srgb(g1)+0.0722*srgb(b1))+(0.2126*srgb(r2)+0.7152*srgb(g2)+0.0722*srgb(b2))-abs((0.2126*srgb(r1)+0.7152*srgb(g1)+0.0722*srgb(b1))-(0.2126*srgb(r2)+0.7152*srgb(g2)+0.0722*srgb(b2)))+0.1)Text relative luminance =
(0.2126*srgb(r1)+0.7152*srgb(g1)+0.0722*srgb(b1))Background relative luminance =
(0.2126*srgb(r2)+0.7152*srgb(g2)+0.0722*srgb(b2))Worked example
- Text red (0–255): 30
- Text green (0–255): 41
- Text blue (0–255): 59
- Background red (0–255): 255
- Background green (0–255): 255
- Background blue (0–255): 255
- Contrast ratio: 14.63
- Text relative luminance: 0.02
- Background relative luminance: 1
Assumptions and limits
This checks a color pair only, not overall accessibility compliance. Normal text AA requires 4.5:1; qualifying large text requires 3:1. Compare unrounded ratios. Transparency, images and gradients need separate sampling.
Results are rounded for display; calculations use unrounded values. Read our calculation methodology.
Understanding the result
Measure contrast between two opaque sRGB colors using WCAG relative luminance. The preview shows the entered foreground and background. Black on white has a ratio of 21:1; equal colors have 1:1.
When this tool is useful
The preview shows the entered foreground and background. Black on white has a ratio of 21:1; equal colors have 1:1.
Understanding your inputs
| Input | Example |
|---|---|
Text red (0–255) r1 | 30 |
Text green (0–255) g1 | 41 |
Text blue (0–255) b1 | 59 |
Background red (0–255) r2 | 255 |
Background green (0–255) g2 | 255 |
Background blue (0–255) b2 | 255 |
Frequently asked questions
What assumptions should I check?
This checks a color pair only, not overall accessibility compliance. Normal text AA requires 4.5:1; qualifying large text requires 3:1. Compare unrounded ratios. Transparency, images and gradients need separate sampling.
How can I check the result?
Start with the labelled example. Keep units consistent, calculate without intermediate rounding and change one input at a time. The diagram explains the model; the result table supplies the numerical answer.