Colour accessibility test for Tailwind CSS

This uses the WCAG accessibility ratings. You can switch between a white and black background using the toggle below and the scores will change for that background.

About this site

rose

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA Large
CSS
600Score: AA
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

pink

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA Large
CSS
600Score: AA
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

fuchsia

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA Large
CSS
600Score: AA
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

purple

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA Large
CSS
600Score: AA
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

violet

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA Large
CSS
600Score: AA
CSS
700Score: AAA
CSS
800Score: AAA
CSS
900Score: AAA

indigo

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA Large
CSS
600Score: AA
CSS
700Score: AAA
CSS
800Score: AAA
CSS
900Score: AAA

blue

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA Large
CSS
600Score: AA
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

lightBlue

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: Fail
CSS
600Score: AA Large
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

cyan

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: Fail
CSS
600Score: AA Large
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

teal

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: Fail
CSS
600Score: AA Large
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

emerald

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: Fail
CSS
600Score: AA Large
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

green

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: Fail
CSS
600Score: AA Large
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

lime

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: Fail
CSS
600Score: AA Large
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

yellow

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: Fail
CSS
600Score: Fail
CSS
700Score: AA
CSS
800Score: AA
CSS
900Score: AAA

amber

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: Fail
CSS
600Score: AA Large
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

orange

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: Fail
CSS
600Score: AA Large
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

red

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA Large
CSS
600Score: AA
CSS
700Score: AA
CSS
800Score: AAA
CSS
900Score: AAA

warmGray

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA
CSS
600Score: AAA
CSS
700Score: AAA
CSS
800Score: AAA
CSS
900Score: AAA

trueGray

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA
CSS
600Score: AAA
CSS
700Score: AAA
CSS
800Score: AAA
CSS
900Score: AAA

gray

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA
CSS
600Score: AAA
CSS
700Score: AAA
CSS
800Score: AAA
CSS
900Score: AAA

coolGray

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA
CSS
600Score: AAA
CSS
700Score: AAA
CSS
800Score: AAA
CSS
900Score: AAA

blueGray

CSS
50Score: Fail
CSS
100Score: Fail
CSS
200Score: Fail
CSS
300Score: Fail
CSS
400Score: Fail
CSS
500Score: AA
CSS
600Score: AAA
CSS
700Score: AAA
CSS
800Score: AAA
CSS
900Score: AAA