ROKING-A11Y Palette Tuner
The Roking-A11y Palette Tuner performs luminance contrast testing for multiple colors in a palette, creating a matrix that allows easy reference to multiple contrast ratios simultaneously. Other Roking-A11y tools can be found in the central respository.
Luminance contrast is not about color, per se, but about brightness. In the Web Content Accessibility Guidelines (WCAG), there are two methods for calculating brightness, one is a general brightness level that's used to determine whether or not a change in brightness is a flash and the other is brightness relative to an element's surroundings, or in other words, the brightness of the foreground compared to the brightness of the background.
The WCAG identifies three thresholds that can be use to determine whether or not an element is easily perceived. The thresholds for text on a background are higher than for non-text, and are relative to the size or weight of the font. The Palette Tuner calculates the contrast and provides the raw number, allowing the user to determine whether the foreground/background values are appropriate for non-text, normal text, or large or bold text.
This tool allows you to provide a list of colors comprising a color pallete in the input labelled Palette, as a comma-separated list of hexadecimal values and will calculate the contrast between each of the colors in the palette when the Calculate button is activated. As an example, a palette of white (#ffffff), yellow (#ffff00), magenta (#ff00ff), red (#ff0000), light blue (#00ffff), green (#00ff00), blue (#0000ff), and black (#000000) is provided. Clicking or tapping the Calculate button will generate the example matrix. Replace the palette list with your own colors, and activate the Calculate button to get your matrix. Visually, luminance contrast values of 3 and more, suitable for non-text purposes, are in italics on a light yellow background and values of 4.5 and more, suitable for text or non-text purposes, are in italic and bold on a light green background. Values less than 3, which are unsuitable for anything other than decorative purposes, are shown in normal text on a light red background.
The palette input has been enhanced to take two different specifications. The default example is a comma-separated list of hexadecimal color values. A JSON object is also acceptable, where a color is defined using a name and value. The example value can be switched using this Show object example toggle.
Clicking Show object example will reset the text in the palette definition input.