ROKING-A11Y Color Tuner

The Roking-A11y Color Tuner provides luminance contrast testing with closest matching passing result. Other Roking-A11y tools can be found in the central respository.

The device you are using does not have enough horizontal landscape to prevent scrolling. It is recommended that you switch to a device that is at least 960 pixels wide.

This tool allows you to select an accessible foreground and background color by performing luminance contrast calculations in real time and adjusting the foreground and background color to meet the specified guideline. To tune your colors, simply enter the foreground and background colors in the input boxes below and Calculate. The tuner will calculate the luminance contrast and, if it does not meet the selected guideline level, will adjust the foreground, the background, and both values to give you the closest possible matches that are compliant.

If you wish to use a color picker instead of entering the hexadecimal color values, click the Input Color Values button below.

The default setting uses the WCAG luminance contrast threshold for normal text at the AA compliance level. Test results are also shown for large text, which is defined as either (a) 120 percent the normal size and bold weight or (b) 150 percent the normal size. If you wish to use the higher, AAA, threshold, check the Use stricter AAA compliance level box. If you wish to check the luminance value for non-text items, such as a color map, check the Use non-text compliance level.

Although sufficient contrast is calculated for both normal and large size fonts separately, it is recommended that the values for normal size be used as the contrast ratio will be sufficient for large size automatically; however, sufficient contrast at large size may not be sufficient at normal size.

Action	Foreground	Background	Sample	Contrast (n:1)
				Use AA compliance level for text Use stricter AAA compliance level for text Use non-text compliance level
As is	Foreground color Value provided for foreground is not a valid hexadecimal color	Background color Value provided for background is not a valid hexadecimal color	This is normal text. This is large text.
Foreground adjusted			This is sample text.
Foreground adjusted for large text			This is sample text.
Background adjusted for normal text			This is sample text.
Background adjusted for large text			This is sample text.
Foreground and background adjusted for normal text			This is sample text.
Foreground and background adjusted for large text			This is sample text.