Blended background colours
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dolor libero dignissimos veniam. Testing Totam dolores rem eligendi praesentium harum doloremque ducimus dignissimos, exercitationem, omnis ullam autem, dolor qui numquam. Et!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dolor libero dignissimos veniam. Testing Totam dolores rem eligendi praesentium harum doloremque ducimus dignissimos, exercitationem, omnis ullam autem, dolor qui numquam. Et!
Misc
hai
Background images
Multiple nodes shared background
Different colour nodes with shared background
Lorem ipsum
Adipisci, quidem! Expedita nulla excepturi reprehenderit cumque perferendis? Commodi odio, voluptatem nobis perspiciatis, modi facilis nostrum.
Reprehenderit aperiam incidunt ad, fugiat eligendi!
Learn more about exampleThis should be ignored by contrast check
Same colour nodes with shared background
Lorem ipsum
Adipisci, quidem! Expedita nulla excepturi reprehenderit cumque perferendis? Commodi odio, voluptatem nobis perspiciatis, modi facilis nostrum.
Reprehenderit aperiam incidunt ad, fugiat eligendi!
Single node within background image
Text on background image requires manual review!
Single node within background image
Text on background image requires manual review!
Background image within accordion
Text on background image requires manual review!
asdsdsdssNo text within background image
1:1 ratio
1:1 means invisible to all, or potentially false positive.
Normal size text
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam quasi ipsa assumenda aliquam dolore amet mollitia similique ab consequuntur magnam id veritatis explicabo accusamus, ipsum iusto ea eligendi necessitatibus iure?
Large size text
Has 0 opacity.
SVGs
Stroke
Opacity
Text has low opacity via explicit opacity attribute
opacity: 0.05;
Text has 0.5 opacity.
Opacity is set to 0
opacity: 0;
Lorem ipsum dolor.
Inside the shadow dom
Heading in the shadow dom
Inputs
Colour input
Range
Meter
Progress
<select> with low contrast
<select> element with background image
Input
Text area
Normal text (400 at 16px)
Testing extremes 1.01:1 ratio
Super light grey
What about this
RGB
This is using the RGB colour space.
RGBA
This is using the RGBA colour space. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam dolorum eligendi inventore ad vel, recusandae unde excepturi fugiat, sapiente beatae, reiciendis obcaecati sunt rem quod aliquam tempore fuga. Vero, repellendus!
Hex
This is using the Hex colour space.
This is using the Hex colour space.
HSL
This is using the HSL colour space.
HSLA
This is using the HSLA colour space.
Display P3
This is using the Display P3 colour space.
Display P3 Background
This is using the Display P3 with background.
Lab
This is using the Lab colour space.
LCH
This is using the LCH colour space.
OKLab
This is using the OKLab colour space.
OKLCH
This is using the OKLCH colour space.
HWB
This is using the HWB colour space.
Named color
This is using the named colour AliceBlue
Rec. 2020
This is using the Rec. 2020 colour space.
Large text (400 at 24px)
AAA
This is using the RGB colour space.
RGB
This is using the RGB colour space.
RGBA
This is using the RGBA colour space.
Hex
This is using the Hex colour space.
HSL
This is using the HSL colour space.
HSLA
This is using the HSLA colour space.
Display P3
This is using the Display P3 colour space.
Lab
This is using the Lab colour space.
LCH
This is using the LCH colour space.
OKLab
This is using the OKLab colour space.
OKLCH
This is using the OKLCH colour space.
HWB
This is using the HWB colour space.
Named Color (RebeccaPurple)
This is using the named colour RebeccaPurple.
Rec. 2020
This is using the Rec. 2020 colour space.
Large text (700 at 24px)
RGB
This is using the RGB colour space.
RGBA
This is using the RGBA colour space.
Hex
This is using the Hex colour space.
HSL
This is using the HSL colour space.
HSLA
This is using the HSLA colour space.
Display P3
This is using the Display P3 colour space.
Lab
This is using the Lab colour space.
LCH
This is using the LCH colour space.
OKLab
This is using the OKLab colour space.
OKLCH
This is using the OKLCH colour space.
HWB
This is using the HWB colour space.
Named Color (RebeccaPurple)
This is using the named colour RebeccaPurple.
Rec. 2020
This is using the Rec. 2020 colour space.
hsla
This is using HSLA colour.
Visually hidden content
Large text passing
Some large brown text
Colour name
This is using a colour name.
Transparency
RGBA with various transparency
Color mix
Colour mix