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.
Help - Colour Contrast Checker
Getting Started
This tool helps you check whether your colour combinations meet WCAG 2.2 accessibility standards. Enter a foreground (text) colour and a background colour to see the contrast ratio and compliance status.
Aim for at least 4.5:1 for normal text (AA) or 7:1 for enhanced accessibility (AAA).
Entering Colours
Enter colours using:
- Colour Picker: Click the coloured square for visual selection
- Hex: Enter codes like
#FF5733orFF5733 - RGB: Values from 0-255 for Red, Green, Blue
- HSL: Hue (0-360), Saturation (0-100%), Lightness (0-100%)
- HSV: Hue (0-360), Saturation (0-100%), Value (0-100%)
- Colour Names: CSS names like
red,darkslategray
EyeDropper Tool
Pick any colour from your screen with the eyedropper button.
Colour Sliders and Alpha
Click "Colour Sliders" to reveal adjustable controls:
- RGB: Red, Green, Blue (0-255)
- HSL: Hue, Saturation, Lightness
- HSV: Hue, Saturation, Value
- Alpha: Transparency (0-1)
WCAG 2.2 Success Criteria
| Criterion | Level | Normal | Large |
|---|---|---|---|
| SC 1.4.3 (Minimum) | AA | 4.5:1 | 3:1 |
| SC 1.4.6 (Enhanced) | AAA | 7:1 | 4.5:1 |
| SC 1.4.11 (Non-text) | AA | 3:1 | |
Suggested Accessible Colours
When contrast fails, the tool suggests accessible alternatives:
- AA/AAA Suggestions: Colours meeting requirements
- Click to Apply: Click any suggestion to use it
- Undo: Revert with the Undo button
Vision Simulation
Preview how colours appear with different vision conditions:
- Protanopia/Deuteranopia/Tritanopia: Colour blindness types
- Monochromacy: Complete colour blindness
- Visual Acuity: Blurred vision (20/40 to 20/400)
- Tunnel Vision: Peripheral vision loss
Copying Results
- Copy Summary: Brief contrast ratio and status
- Copy Detailed: Full WCAG compliance report
- Copy Colour: Individual colour values
Keyboard Navigation
- Tab - Navigate controls
- Escape - Close dialogs
- Arrow keys - Adjust sliders
Foreground Colour
Background Colour
SAMPLE: Foreground on Background
Contrast Ratio: 21.00:1
WCAG 2.2 Success Criteria
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