Colour contrast checker
Calculated in your browser · nothing is uploaded
Calculates the WCAG contrast ratio between two colours and shows which conformance levels the pair passes: 4.5:1 for normal text at AA, 3:1 for large text, 7:1 for AAA.
How to use the colour contrast checker
The ratio is computed from relative luminance, not from how different the colours look, which is why a mid-grey on white and a mid-blue on white can score identically while looking nothing alike. Large text gets a lower threshold because size compensates for contrast, and "large" has a specific meaning: 18.66px bold or 24px regular, not merely bigger than the body copy. Two things the ratio does not cover: it says nothing about colour-blind users distinguishing two colours from each other, and WCAG 2 contrast is known to under-serve some combinations, which is why APCA exists as a proposed replacement.
Questions
4.5:1 for normal text at AA, 3:1 for large text, and 7:1 for AAA.
18.66px bold or 24px regular. Merely larger than your body copy does not qualify.
No. Contrast is about luminance. Two colours can have great contrast and be indistinguishable to someone with a colour vision deficiency.
Yes; 3:1 for interface components and meaningful graphics under WCAG 2.1.
A proposed replacement contrast algorithm that models perception better than the WCAG 2 formula. Not yet the standard.