ACCESSIBILITY REFERENCE
Contrast Ratio Calculator
Choose a text colour and background colour to calculate their relative contrast ratio and compare it with common WCAG thresholds.
The contrast ratio is 21.00:1.
Normal text: AAA ยท Large text: AAA
How the contrast ratio works
The ratio is calculated from the relative luminance of the two colours. The lighter luminance is placed above the darker luminance in the WCAG contrast formula.
A ratio of 4.5:1 is the commonly used AA threshold for normal-sized text, while 3:1 applies to large text. AAA uses higher thresholds.
Contrast ratio reference
Contrast ratio is different from the contrast slider on an image editor. A photo editor changes pixel relationships across an image, while this calculator compares two colours for text and background accessibility.
Use the result as an accessibility check, then test real content at its final size and weight.
Contrast ratio FAQs
What is a good contrast ratio?
WCAG uses specific thresholds depending on text size and conformance level. The calculator shows the ratio so you can compare it with the relevant requirement.
Does a contrast ratio calculator test an image?
No. It compares two colours. Image contrast editing is a different operation.