## 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 example

This 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!

asdsdsdss

### No 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

BlueSky
BlueSky
BlueSky
BlueSky

### Stroke

BlueSky
BlueSky
BlueSky

## 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

## Inputs

### Colour input

Color:

### Range

Range

### Meter

Fuel at 50/100

### Progress

Uploading Document 70 %

### `<select>` with low contrast

Choose a pet:

### `<select>` element with background image

Choose a pet:

### Input

Name:
Phone:

## Text area

Address: Test...

## Normal text (400 at 16px)

Low text

### 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

This is visually hidden.

## Large text passing

## Some large brown text

## Colour name

This is using a colour name.

## Transparency

RGBA with various transparency

## Color mix

Colour mix