Passed Passed Example 1 Open in a new tab This dark gray text has a contrast ratio of 12.6:1
on the white background.
Some text in a human language
Passed Example 2 Open in a new tab This dark gray text has a contrast ratio between 12.6:1
and 7:1 on the white to light blue gradient background.
Some text in a human language
Passed Example 3 Open in a new tab This white text has a contrast ratio between 18:1 and 7:1
on the background image.
Black hole sun
Passed Example 4 Open in a new tab This 18pt large black text has a contrast ratio of 4.6:1
on the gray background.
Some text in a human language
Passed Example 5 Open in a new tab This 14pt bold black text has a contrast ratio of 4.6:1
on the gray background.
Some text in English
Passed Example 7 Open in a new tab This text has the default browser text color on the
default browser background color. By default this is black text on a white background, which
has a contrast ratio of 21:1.
Some text in a human language
Passed Example 8 Open in a new tab This dark gray text has a contrast ratio of 12.6:1 on the
white background in a shadow DOM tree.
Passed Example 9 Open in a new tab This text has the default user agent link text and
background color, of #0000EE and white. This results in a contrast ratio of 9.39:1.
W3C
Passed Example 10 Open in a new tab This text is using the default user agent text color and
background color. By default, this is black text on a white background with a contrast ratio
of 21:1
My button!
Failed Failed Example 1 Open in a new tab This light gray text has a contrast ratio of 5.7:1
on the white background.
Some text in English
Some text in English
Failed Example 3 Open in a new tab This 18pt large black text has a contrast ratio of 3.6:1
on the gray background.
Some text in a human language
Failed Example 4 Open in a new tab This light gray text has a contrast ratio of 2.3:1 on the
white background.
Some text in English
Failed Example 5 Open in a new tab This 14pt bold black text has a contrast ratio of 3.6:1
on the gray background.
Some text in English
Failed Example 7 Open in a new tab This black text with 60% alpha channel has a contrast
ratio of 5.7:1 on the white background.
Some text in English
Failed Example 8 Open in a new tab This black text with 60% opacity has a contrast ratio of
5.7:1 on the white background.
Some text in English
Failed Example 11 Open in a new tab The first p element has a contrast ratio of 12.6:1. The
second p element, which contains an example of the Helvetica font, has a contrast ratio of
6.4:1. Because this provides information, and is not only for aesthetic purposes, this is
not considered purely decorative.
Helvetica is a widely used sans-serif typeface developed in 1957 by Max Miedinger and
Eduard Hoffmann.
The quick brown fox jumps over the lazy dog.
Failed Example 12 Open in a new tab This text in a button element has a contrast ratio of
6.4:1.
Failed Example 13 Open in a new tab This text in a semantic button has a contrast ratio of
6.4:1.
My button!
Inapplicable Inapplicable Example 1 Open in a new tab This text is not visible because of
display: none.
Some invisible text in English
Inapplicable Example 2 Open in a new tab This text is not visible because it is positioned
off screen.
Some invisible text in English
Inapplicable Example 3 Open in a new tab This text is not visible because the foreground
color is the same as the background color.
Hidden text - U U D D L R L R B A S
Inapplicable Example 4 Open in a new tab This text is not the child of an HTML element.
Inapplicable Example 5 Open in a new tab This text not part of a text node.
Inapplicable Example 6 Open in a new tab This text is part of a label of a disabled widget,
because it is in a label element that is the label for an input element with type="text".
Inapplicable Example 7 Open in a new tab This text is part of a label of a disabled widget,
because it is in an element that is referenced by aria-labelledby from an element with
role="textbox".
test
Inapplicable Example 8 Open in a new tab This text is part of a label of a disabled widget,
because it is in a label element that is the label for an input element in a fieldset
element with the disabled attribute.
Inapplicable Example 9 Open in a new tab This text is part of a label of a disabled widget,
because it is in a label element that is the label for an input element in an element with
role="group" with the aria-disabled="true" attribute.
Inapplicable Example 10 Open in a new tab This text is part of a disabled widget because it
is a child of a button element with the disabled attribute.
Inapplicable Example 11 Open in a new tab This text is part of a disabled widget because it
is a child of an element with the role attribute set to button and with an aria-disabled
attribute set to true.