Colour Contrast Tool

Help

This tool computes the relative luminance ratio of two colours using the algorithm from Web Content Accessibility Guidelines (WCAG).

There are two ways to specify colours:

Type or paste a CSS hex colour specification (such as ‘#3c9’ or ‘#32C89E’) in the input field.
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.

The advanced mode provides these additional features:

text mode and graphics mode;
support for more colour specifications (RGB, HSL, keywords);
inputs for setting or changing individual RGB or HSL components, making it easier to find colours that satisfy the contrast requirements;
opacity setting;
detailed controls for font settings and type of graphics;
computes the lightness contrast according to the APCA algorithm.

Foreground

Background

Contrast

Ratio 21.00:1

Sample with bold and italic text.

Contrast (Minimum) (AA)

WCAG success criterion 1.4.3 requires that text and images of text have a contrast ratio of at least 4.5:1 against the background.

Large-scale text and large-scale images of text (≥18 pt or ≥14 pt bold) must have a contrast ratio of at least 3:1.

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Text that is part of a logo or brand name has no contrast requirements.

Pass (regular text) Pass (large text)

Contrast (Enhanced) (AAA)

WCAG success criterion 1.4.6 requires that text and images of text have a contrast ratio of at least 7:1 against the background.

Large-scale text and large-scale images of text (≥18 pt or ≥14 pt bold) must have a contrast ratio of at least 4.5:1.

Text that is part of a logo or brand name has no contrast requirements.

Pass (regular text) Pass (large text)

Non-text Contrast (AA)

WCAG success criterion 1.4.11 requires that the visual representation of the following have a contrast ratio of at least 3:1 against adjancent colours:

User interface components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author.
Graphical objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Pass