Help for the Color Contrast Tool

Two-color mode 🔗

Evaluate the contrast between two colors. You can specify the colors:

Using an RGB hex triplet (either 6-digit, e.g. #2c1376, or 3-digit, e.g. #693). Do not include the octothorpe (#).
Using your browser's built-in color picker.

Screenshot: Two settings, labeled color #1 and color #2. Both are followed by # and then a text-input box (with RGB hex-triplets) and then the Safari's built-in color-picking widget.

The widget will provide:

The relative luminance of each color.
The contrast ratio between the two colors.
WCAG compliance ratings for the pair of colors (for both normal-sized text and large text).

In addition, there will be a permanent link to your current color selections and results. Switching to color/hue mode will preserve color #1, while the hue of color #2 will be used for the hue.

Color/hue mode 🔗

In this mode, you provide:

One color (called the contrasting color):
- Using an RGB hex triplet (either 6-digit, e.g. #2c1376, or 3-digit, e.g. #693). Do not include the octothorpe (#).
- Using your browser's built-in color picker.
This color can be assigned the role of background or foreground.
A hue given as an angle between 0° and 360°. Do not include the degree sign (°). There is also a slider that you can use to change the hue.

Screenshot: A widget in which the user can enter a color as a hex triplet, and specify the hue for a second color. The widget then shows how well the first color contrasts with various HSL combinations involving the given hue.

In response, the widget will provide a table with colors using the 17² = 289 combinations of the specified hue with various values for saturation and lightness. (Some colors will be repeated, because a lightness of 0% always produces black, while lightness of 100% always produces white.) The table will show the contrasting color along with these other colors. The table will give the contrast ratio and the WCAG compliance ratings for this color combo.

Hovering over a cell of the table will show the hex code of second color as an RGB hex triplet. Clicking on (or touching, etc.) a cell will take you to the two-color mode with that particular color combo as the two colors.

In addition, there will be a permanent link to your current color and hue selections and results. Switching to two-color mode using the button at the top will use the contrasting color as color #1, while color #2 will be the closest RGB hex triplet corresponding to the color with the specified hue, saturation 50%, and lightness 50%.

Concepts 🔗

About colors on the web

Relative luminance 🔗

The relative luminance of a color is an approximation of how bright that color will be perceived by the human eye. This takes into account human eye's different sensitivity to various colors. (The eye is most sensitive to green, less sensitive to red, and least sensitive to blue.) Relative luminance is measured on a scale from 0 to 1.

For example:

#000 (black) has a relative luminance of 0.
#191970 (midnight blue) has a relative luminance of 0.02.
#daa520 (goldenrod) has a relative luminance of 0.42.
#0f0 (lime) has a relative luminance of 0.72.
#0ff (cyan) has a relative luminance of 0.79.
#fff (white) has a relative luminance of 1.

( W3C WCAG description of relative luminance)

Contrast ratio 🔗

The contrast ratio between two colors measures how well the colors contrast. Naïvely, one might define it as the ratio of the two colors' relative luminances. However, black has a relative luminance of zero, so that won't work. Instead, the contrast ratio is defined as $\frac{L_{1} + 0.05}{L_{2} + 0.05},$ where $L_{1}$ is the relative luminance of the lighter color and $L_{2}$ is the relative luminance of the darker color. Contrast ratios range from 1 to 21, with higher values representing better contrasts.

For example:

Any color with itself will have a contrast ratio of 1 (the worst possible).
#0f0 and #0ff (like this or like this, which I find extremely difficult to read) have a contrast ratio of 1.09.
#0f0 and #fff (like this or like this, a little better, but still not great) have a contrast ratio of 1.37.
#007030 and #fee11a (like this or like this —Go Ducks!) have a contrast ratio of 4.76.
#daa520 and #191970 (like this or like this) have a contrast ratio of 6.63.
#040 and #ff0 (like this or like this) have a contrast ratio of 10.7.
#0ff and #000 (like this or like this) have a contrast ratio of 16.7.
#fff and #000 (like this or like this) have a contrast ratio of 21 (the best possible).

( W3C WCAG description of the contrast ratio)

W3C WCAG compliance 🔗

The World Wide Web Consortium (W3C) has published Web Content Accessibility Guidelines (WCAG). Regarding color contrasts:

Guideline 1.4.3, which defines a minimum accessibility level, requires normal-sized text to have a contrast ratio of at least 4.5, and large text to have a contrast ratio of at least 3. This is also known as the AA level.
Guideline 1.4.6, which defines a enhanced accessibility level, requires normal-sized text to have a contrast ratio of at least 7, and large text to have a contrast ratio of at least 4.5. This is also known as the AAA level.

For example:

These color combinations get an AAA accessibility rating for normal-sized text:
- #fff and #000, like this or like this (contrast ratio: 21)
- #0ff and #000, like this or like this (contrast ratio: 16.7).
- #040 and #ff0, like this or like this (contrast ratio: 10.7).
These color combinations get an AA accessibility rating for normal-sized text:
- #daa520 and #191970, like this or like this (contrast ratio: 6.63).
- #007030 and #fee11a, like this or like this (contrast ratio: 4.76).
These color combinations are not compliant with the WCAG standards:
- #0f0 and #fff, like this or like this (contrast ratio: 1.37).
- #0f0 and #0ff, like this or like this (contrast ratio: 1.09).