Some color schemes are nice to look at, but lack the contrast to be useful for people with reduced eyesight - and like all accessibility features, it's not just good for them, it's good for all of us. This is a tool to modify any color scheme to live up to the requirements in Web Content Accessibility Guidelines 2.0[a] ("WCAG 2") levels AA and AAA.
The WCAG define a set contrast threshold that text must have relative to its background in order to be accessible. Text is classified into three types:
Small Non-Bold Text: less than 18pt, or approximately 1.5em rendered.
Large Non-Bold Text: 18pt or greater, or approximately 1.5em rendered.
Medium Bold Text: 14pt or greater and bold, or approximately 1.2em rendered.
| Text | Level AA | Level AAA |
|---|---|---|
| Small Non-Bold | 4.5 | 7.0 |
| Large Non-Bold | 3.0 | 4.5 |
| Medium Bold | 3.0 | 4.5 |
This tool will take a color scheme, and then, in order, adjust the brightness, saturation and finally hue of the color until it reaches the required threshold against the specified background color. List the colors in the text box below, separated by commas. The Solarized[b] color scheme is included as a sample.
| Background | |
| Name | |
| Colors | |
|---|---|