Accessibility Color Wheel

Info on the purpose of this tool is available in my home page and blog

Use:

Choose a foreground color by pointing the mouse over the wheel or the vertical grey gradation strip and click or, if you have a touch screen, just touch them. Then click the "Background" button and choose a background color the same way. If a checkmark becomes visible the color pair is good for accessibility. Otherwise change one color or both by selecting foreground or background with the buttons.

not ok

Foreground 1* copied!

Background 2* copied!

C B

Contrast

Normal

This box shows the colors with normal vision.

* You can enter an hex value (3 or 6 digits) in this box

Algorithm (here's an explanation of the implemented algorithms)

Contrast ratio (WCAG 2 recommended )
Contrast / brightness difference (WCAG 1)

Values and examples

Deuteranope

1		2
C		B
Contrast

Deuteranopia is insensitivity to green. This box simulates the vision of deuteranope (partially color blind) people.

Protanope

1		2
C		B
Contrast

Protanopia is insensitivity to red. This box simulates the vision of protanope (partially color blind) people.

Tritanope

1		2
C		B
Contrast

Tritanopia is very rare and is insensitivity to blue. This box simulates the vision of tritanope (partially color blind) people.

Accessibility Color Wheel version 3.1 by Giacomo Mazzocato
Based on the Color Wheel by Jemima Pereira

Tests by Thierry Tardif: Alpha Design and Julie Deganutti: Jade Black Design

For other web developer test tools check out UITest

This tool is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.