Contrast Ratio Calculator
Find the WCAG contrast ratio between two luminances.
Contrast ratio measures how distinguishable two colors are, key for accessible design.
How the Math Works
The Contrast Ratio Calculator uses the WCAG formula: ratio = (Lmax + 0.05) / (Lmin + 0.05), where Lmax is the higher luminance and Lmin is the lower luminance of the two colors being compared. Luminance values range from 0 (black) to 1 (white), representing relative brightness. The addition of 0.05 to both numerator and denominator accounts for the human eye's sensitivity to low light levels, ensuring the formula accurately reflects perceived contrast rather than just raw brightness differences. For example, comparing white (L=1) with black (L=0) yields (1+0.05)/(0+0.05) = 21:1, the maximum possible contrast ratio.
Practical Applications
To use this calculator practically, first determine the relative luminance of your background and text colors using standard color conversion formulas, or input known luminance values directly. Enter these values into the calculator to instantly receive the contrast ratio. Web designers should then compare this result against WCAG accessibility standards: a ratio of 4.5:1 or higher for normal text, 3:1 for large text (18pt or 14pt bold), and 3:1 for non-text elements like buttons and form fields. If your contrast falls short, adjust your color palette by lightening text or darkening backgrounds until you meet the required threshold.
Day-to-Day Use
This calculation helps ensure your digital content is readable and accessible to everyone, including people with visual impairments or color vision deficiencies. Whether you're designing a website, creating presentation slides, or choosing colors for documents, checking contrast ratios prevents eye strain and makes your content inclusive. Proper contrast means users can comfortably read text without squinting or relying on additional aids, ultimately making your communications clearer and more professional for all audiences, regardless of their visual abilities or the lighting conditions where they view your content.
Worked example
Luminances 1 and 0.2 give a 4.2:1 ratio.
FAQ
What ratio passes WCAG AA?
4.5:1 for normal text, 3:1 for large text.