Vérificateur de contraste des couleurs

Pour commencer

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 #FF5733 ou FF5733
• 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)

Critères de réussite WCAG 2.2

Couleurs accessibles suggérées

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

Simulation visuelle

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

Navigation au clavier

• Tab - Navigate controls
• Escape - Close dialogs
• Arrow keys - Adjust sliders