Colour Contrast Checker
Colour Contrast Checker
Enter the colours first, press Inspect, then modify colours and record the before/after palette.
Step 1: Enter Colours
Press Inspect to check the original colours.
Original Text Colour vs Background
0.00:1
Original Hover Colour vs Background
0.00:1
Step 2: Modify Colours
Use the sliders or Auto Fix buttons to create the modified colours. This second checker shows whether the modified colour pairing passes.
#000000
Adjust Lightness: 100%
#000000
Adjust Lightness: 100%
#000000
Adjust Lightness: 100%
#000000
Adjust Lightness: 100%
Modified normal text preview
Sample heading text
Sample link text
Modified hover text preview
Sample heading text
Sample hover link text
Modified Text Colour vs Background
0.00:1
Modified Hover Colour vs Background
0.00:1
Recorded Colour Palette
Saved in this browser only. Each row records original colours and modified colours.
| Mode | State | Original Background | Original Text | Original Ratio | Modified Background | Modified Text | Modified Ratio | Modified AA | Modified AAA |
|---|---|---|---|---|---|---|---|---|---|
| No recorded colours yet. | |||||||||
WCAG guide: Normal text should be at least 4.5:1. Large text should be at least 3:1. AAA normal text should be at least 7:1.