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 5:1 on the white to blue gradient background.
Some text in a human language
Passed Example 3 Open in a new tab This light gray text has a contrast ratio between 13:1
and 5:1 on the background image.
Black hole sun
Passed Example 5 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
Passed Example 6 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
Passed Example 8 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 10 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 11 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 2.3:1
on the white background.
Some text in English
Failed Example 2 Open in a new tab This light gray text has a contrast ratio between 1.2:1
and 2.3:1 on the white to blue gradient background.
Some text in English
Failed Example 3 Open in a new tab This light gray text has a contrast ratio between 2.7:1
and 3:1 on the background image.
Black hole sun
Failed Example 4 Open in a new tab This black text with 30% alpha channel has a contrast
ratio of 2.1:1 on the white background.
Some text in English
Failed Example 5 Open in a new tab This black text with 30% opacity has a contrast ratio of
2.1:1 on the white background.
Some text in English
Failed Example 7 Open in a new tab This semi-transparent gray text has a contrast ratio
between 2.3:1 and 4.2:1 on the black and white background. The light gray text is compared
to the white section of the background and the dark gray text is compared to the black
section of the background.
Hello world
Failed Example 8 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
3.85: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 9 Open in a new tab This text in a button element has a contrast ratio of
3.85:1.
Failed Example 10 Open in a new tab This text in a semantic button has a contrast ratio of
3.85: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.
My button!
Hello custom world
You may shoot me with your words,
You may cut me with your eyes,
You may kill me with your hatefulness,
But still, like air, I'll rise.
