Colour Contrast Tool

Help

This tool computes the ‘colour contrast’ of two colours using both the relative luminance ratio algorithm from Web Content Accessibility Guidelines (WCAG) and the lightness contrast from the newer Accessible Perceptual Contrast Algorithm (APCA).

The conformance level for a contrast value is shown within square brackets in the output field labels: A, A‌A, or A‌A‌A. The legal requirement is A‌A.

There are two modes: text and graphic. Text mode measures the contrast of a text foreground colour against a background colour. The WCAG conformance criteria (1.4.3 and 1.4.6) depend on the font size and font weight. Graphic mode measures the contrast of two adjacent colours, not necessarily a foreground and a background.

Note that APCA differentiates between light-on-dark and dark-on-light, so make sure you get the foreground/background right. There is no APCA conformance mapping for graphic mode.

You can specify colours in different ways:

  1. Type or paste a CSS colour specification in the input field (see below for supported formats).
  2. Enter red/green/blue or hue/saturation/lightness values in separate numeric fields. For the foreground colour you can also specify an opacity value.
  3. Click on the colour picker widget after the input field (or focus and press Enter ) and select a colour. The appearance and function of this widget is browser dependent; for instance, Chromium-based browsers provide an eye-dropper that lets you pick a colour from any pixel on the screen.
Supported colour specifications
Hex
CSS hexadecimal notation. Examples: ‘#3c9’, ‘#32C89E’, or, with opacity, ‘#3c9c’, ‘#32C89EC0’.
RGB
Red, green, and blue as 8-bit values (0–255) or percentages, optionally with alpha value. Examples: ‘rgb(255 240 128)’, ‘rgb(255 240 128 / 0.8)’, ‘rgb(255 240 128 / 80%)’, ‘rgb(100% 94.2% 50.2% / 0.8)’, ‘rgb(100% 94.2% 50.2% / 80%)’.
RGB, old style
Red, green, and blue as 8-bit values (0–255) or percentages. Examples: ‘rgb(255, 240, 128)’, ‘rgb(100%, 94.2%, 50.2%)’.
RGBA, old style
Like RGB with an alpha value (opacity; 0≤α≤1). Examples: ‘rgba(255, 240, 128, 0.8)’, ‘rgba(100%, 94.2%, 50.2%, 0.8)’.
HSL
Hue (0°–360°), saturation (%), lightness (%), optionally with alpha value. Examples: ‘hsl(310 47% 72%)’, ‘hsl(310deg 47% 72% / .6)’, ‘hsl(344grad 47% 72% / 60%)’, ‘hsl(5.41rad 47% 72%)’, ‘hsl(.86turn 47% 72%)’.
HSL, old style
Hue (0°–360°), saturation (%), lightness (%). Example: ‘hsl(310, 47%, 72%)’.
HSLA, old style
Like HSL with an alpha value (opacity; 0≤α≤1). Example: ‘hsla(310, 47%, 72%, 0.6)’.
Keyword
Case insensitive CSS colour keyword. Examples: ‘white’, ‘DarkSlateBlue’.

Note that opacity values only make sense for foreground colours.

APCA lightness contrast values are negative for light-on-dark combinations, but the absolute values are equivalent. Lc 60 and Lc −60 represent the same perceived contrast.

Mode

Foreground Background
Text properties

Notes on font properties

The APCA algorithm assumes an x-height ratio of 0.52. For a font with a lower x-height ratio, adjust the specified size. For example: Times New Roman has an x-height ratio of 0.45, so if the specified font size is 16px, enter 16×0.45/0.52=14 as the font size value.

The font weight is based on reference fonts such as Helvetica or Arial. For other fonts, set a text in Arial and then set the same text in the used font below. Then adjust the weight of the Arial until the texts appear similar. Then enter the adjusted weight as the font weight value.

Graphics properties
Notes on graphics properties

A semantic graphic is a graphic element that conveys specific information, such as a diagram, pictogram or icon. It is considered large if it is ‘mostly solid’ and is no less that 5.5px solid in its smallest dimension. A small graphic is smaller or ‘outlined’ rather than ‘mostly solid’.

Examples of non-semantic graphics include large buttons and thick focus outlines, no less than 5px solid in their smallest dimensions. They must not contain any finer details.

Contrast

Sample with bold and italic text.