Contrast Ratio Calculator

The contrast ratio is derived from the relative luminance of two colors, comparing the lighter color to the darker color. Relative luminance measures the brightness of a color normalized to 0 for absolute black and 1 for absolute white. Using the standard WCAG formula, the relative luminance (RL) of an RGB color is calculated using the formula: RL = 0.2126 * R + 0.7152 * G + 0.0722 * B, where R, G, and B are adjusted for gamma correction. The final contrast ratio is then computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter shade and L2 is the relative luminance of the darker shade. This results in a ratio ranging from 1:1 (no contrast) up to 21:1 (maximum contrast between pure black and pure white).

Imagine you are designing a website and want to test if your dark charcoal text (#333333) on a light gray background (#F0F0F0) meets modern accessibility benchmarks. First, the calculator converts these hexadecimal color codes into linear RGB values and determines their relative luminance. The relative luminance of the light gray background (#F0F0F0) is approximately 0.88, while the dark charcoal text (#333333) yields a relative luminance of approximately 0.037. Applying the contrast ratio formula: (0.88 + 0.05) / (0.037 + 0.05), which equals 0.93 / 0.087, resulting in a contrast ratio of roughly 10.69:1. Since 10.69 is well above the standard thresholds, this color combination easily passes strict readability requirements.

Always verify contrast using the final rendered font size, as bold or larger text has more forgiving requirements than standard body text. Avoid placing critical text over complex background imagery or gradients unless a solid, opaque overlay is applied to guarantee uniform contrast across the entire canvas. Finally, do not rely solely on color to convey important information; pair color cues with icons, underlines, or distinct typography to support users with color vision deficiencies.