Colour Contrast Checker

About monitor accuracy

Colour Contrast Checker by GrackleDocs can give different results on different monitors, especially if the monitor setup is not "native". Different monitors have varying colour calibration, brightness, and contrast, which can affect the accuracy of the eyedropper tool used to select colours, leading to inconsistencies in the calculated contrast ratios. To ensure consistent and accurate results, it's best to use the tool on a single, built-in display.

Foreground Colour

Background Colour

SAMPLE: Foreground on Background

Contrast Ratio: 21.00:1

WCAG 2.2 Success Criteria

Text AA
Normal: 4.5:1 ✓ Pass
Large: 3:1 ✓ Pass
Text AAA
Normal: 7:1 ✓ Pass
Large: 4.5:1 ✓ Pass
Non-Text AA
UI Elements: 3:1 ✓ Pass

This is regular body text demonstrating the contrast between foreground and background colors.

This is large text (24px bold).

Interactive elements: Link example

Suggested Accessible Colours

Click any suggestion to apply it as your foreground colour