Accessibility Color Wheel

PSD to HTML / PSD to Xhtml by Convert2xhtml.com

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

Click to choose the color hovered

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

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

Normal

1*		2*
C		B
Contrast ratio

Use:

Choose a foreground color by pointing the mouse over the wheel or the grey bar and click. Then click the "Background" button and choose a background color the same way. If OK becomes visible here below the color pair is good for accessibility. Otherwise change one color or both by selecting foreground or background with the left buttons.

OK!

* You can enter an hex value (3 or 6 digits) in this box. Then just click Update

Share |

Values and examples

Deuteranope

1		2
C		B
Contrast ratio

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

Protanope

1		2
C		B
Contrast ratio

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

Tritanope

1		2
C		B
Contrast ratio

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

Hover over the wheel or the grey bar to choose colors. Click to confirm the color.

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

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

Home page