created:3/15/2021
updated:3/15/2021
You can review the theme-ui themes colors and their WCAG AA color contrast tests. For an explanation of the AA grades, you can jump to the Legend.
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
#FFF | background | AAA | F |
#F6F6F6 | muted | AAA | F |
#07C | primary | AA | AA |
#30C | secondary | F | AAA |
#000 | text | F | AAA |
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
#FFF | background | AAA | F |
#000 | black | F | AAA |
#007BFF | blue | AA | AA+ |
#17A2B8 | cyan | AA | AA+ |
#DC3545 | danger | AA | AA |
#343A40 | dark | F | AAA |
#FFF | gray-0 | AAA | F |
#F8F9FA | gray-1 | AAA | F |
#E9ECEF | gray-2 | AAA | F |
#DEE2E6 | gray-3 | AAA | F |
#CED4DA | gray-4 | AAA | F |
#ADB5BD | gray-5 | AAA | F |
#6C757D | gray-6 | AA+ | AA |
#495057 | gray-7 | F | AAA |
#343A40 | gray-8 | F | AAA |
#212529 | gray-9 | F | AAA |
#343A40 | grayDark | F | AAA |
#28A745 | green | AA | AA+ |
#6610F2 | indigo | F | AAA |
#17A2B8 | info | AA | AA+ |
#F8F9FA | light | AAA | F |
#DEE2E6 | muted | AAA | F |
#FD7E14 | orange | AAA | F |
#E83E8C | pink | AA | AA+ |
#007BFF | primary | AA | AA+ |
#6F42C1 | purple | AA+ | AA |
#DC3545 | red | AA | AA |
#6C757D | secondary | AA+ | AA |
#28A745 | success | AA | AA+ |
#20C997 | teal | AAA | F |
#212529 | text | F | AAA |
#6C757D | textMuted | AA+ | AA |
#FFC107 | warning | AAA | F |
#FFF | white | AAA | F |
#FFC107 | yellow | AAA | F |
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
HSL(0, 0%, 100%) | background | AAA | F |
HSL(0, 0%, 4%) | black | F | AAA |
HSL(0, 0%, 7%) | blackBis | F | AAA |
HSL(0, 0%, 14%) | blackTer | F | AAA |
HSL(217, 71%, 53%) | blue | AA | AA |
HSL(204, 86%, 53%) | cyan | AAA | F |
HSL(348, 100%, 61%) | danger | AA | AA+ |
HSL(0, 0%, 21%) | dark | F | AAA |
HSL(141, 71%, 48%) | green | AAA | F |
HSL(0, 0%, 48%) | grey | AA | AA+ |
HSL(0, 0%, 29%) | greyDark | F | AAA |
HSL(0, 0%, 21%) | greyDarker | F | AAA |
HSL(0, 0%, 71%) | greyLight | AAA | F |
HSL(0, 0%, 86%) | greyLighter | AAA | F |
HSL(204, 86%, 53%) | info | AAA | F |
HSL(0, 0%, 96%) | light | AAA | F |
HSL(0, 0%, 96%) | muted | AAA | F |
HSL(14, 100%, 53%) | orange | AA | AA+ |
HSL(217, 71%, 53%) | primary | AA | AA |
HSL(271, 100%, 71%) | purple | AA | AA+ |
HSL(348, 100%, 61%) | red | AA | AA+ |
HSL(141, 71%, 48%) | success | AAA | F |
HSL(0, 0%, 29%) | text | F | AAA |
HSL(171, 100%, 41%) | turquoise | AAA | F |
HSL(48, 100%, 67%) | warning | AAA | F |
HSL(0, 0%, 100%) | white | AAA | F |
HSL(0, 0%, 98%) | whiteBis | AAA | F |
HSL(0, 0%, 96%) | whiteTer | AAA | F |
HSL(48, 100%, 67%) | yellow | AAA | F |
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
#060606 | background | F | AAA |
#999 | gray | AAA | F |
#29112C | highlight | F | AAA |
#191919 | muted | F | AAA |
#3CF | primary | AAA | F |
#C0F | purple | AA | AA+ |
#E0F | secondary | AA | AA+ |
#FFF | text | AAA | F |
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
HSL(230, 25%, 18%) | background | F | AAA |
HSL(210, 50%, 60%) | gray | AA | AA+ |
HSL(260, 20%, 40%) | highlight | F | AAA |
HSLA(230, 20%, 0%, 20%) | muted | F | AAA |
HSL(260, 100%, 80%) | primary | AAA | F |
HSL(290, 100%, 80%) | purple | AAA | F |
HSL(290, 100%, 80%) | secondary | AAA | F |
HSL(210, 50%, 96%) | text | AAA | F |
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
#FFF | background | AAA | F |
#F6F6F6 | muted | AAA | F |
#609 | primary | F | AAA |
#306 | secondary | F | AAA |
#000 | text | F | AAA |
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#FFF #000 | background | AAA | F | AAA | F |
#E0E #F0C | highlight | AA | AA+ | AA+ | AA |
#F6F6FF #011 | muted | AAA | F | AAA | F |
#11E #0FC | primary | F | AAA | F | AAA |
#C0C #0CF | secondary | AA+ | AA | F | AAA |
#000 #FFF | text | F | AAA | F | AAA |
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#F49342 | accent | AAA | F | ||
#FFF #000639 | background | AAA | F | AAA | F |
#00044C | darken | F | AAA | ||
#DFE3E8 | gray | AAA | F | ||
#47C1BF #B7ECEC | highlight | AAA | F | F | AAA |
#E6E6E6 #E6E6E6 | muted | AAA | F | F | AAA |
#5C6AC4 #9C6ADE | primary | AA+ | AA | AA+ | AA |
#006FBB #B4E1FA | secondary | AA+ | AA | F | AAA |
#454F5B #3E4155 | text | F | AAA | AAA | F |
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
#FFF | background | AAA | F |
#F1F3F4 | muted | AAA | F |
#1A73E8 | primary | AA | AA |
#9C27B0 | secondary | AA+ | AA |
#202124 | text | F | AAA |
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
#FAFAF9 | background | AAA | F |
#B6DEE2 | blue | AAA | F |
#247BA0 | blueDark | AA+ | AA |
#B2E4DC | green | AAA | F |
#2D5948 | greenDark | F | AAA |
RGBA(0,0,0,.1) | muted | F | AAA |
#F25F5C | primary | AA | AA+ |
#B51916 | primaryDark | AA+ | AA |
#FCBAB1 | primaryLight | AAA | F |
#000200 | text | F | AAA |
#FCF5C7 | yellow | AAA | F |
#FFDA3A | yellowDark | AAA | F |
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
HSL(10, 10%, 98%) | background | AAA | F |
HSL(10, 20%, 50%) | gray | AA | AA+ |
HSL(10, 40%, 90%) | highlight | AAA | F |
HSL(10, 20%, 94%) | muted | AAA | F |
HSL(10, 80%, 50%) | primary | AA | AA+ |
HSL(250, 60%, 30%) | purple | F | AAA |
HSL(10, 60%, 50%) | secondary | AA | AA |
HSL(10, 20%, 20%) | text | F | AAA |
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#609 #C0F | accent | F | AAA | AA+ | AA |
#FFF #060606 | background | AAA | F | AAA | F |
#777 #999 | gray | AA | AA+ | F | AAA |
#EFEFFE #29112C | highlight | AAA | F | AAA | F |
#F6F6F6 #191919 | muted | AAA | F | AAA | F |
#33E #3CF | primary | F | AAA | F | AAA |
#119 #E0F | secondary | F | AAA | AA+ | AA |
#000 #FFF | text | F | AAA | F | AAA |
| AA color | |||
|---|---|---|---|
| color | name | #FFFFFF | #000000 |
#FFF | background | AAA | F |
#000 | black | F | AAA |
#EBF8FF | blue-1 | AAA | F |
#BEE3F8 | blue-2 | AAA | F |
#90CDF4 | blue-3 | AAA | F |
#63B3ED | blue-4 | AAA | F |
#4299E1 | blue-5 | AA | AA+ |
#3182CE | blue-6 | AA | AA+ |
#2B6CB0 | blue-7 | AA+ | AA |
#2C5282 | blue-8 | F | AAA |
#2A4365 | blue-9 | F | AAA |
#FEB2B2 | danger | AAA | F |
#2D3748 | dark | F | AAA |
#F7FAFC | gray-1 | AAA | F |
#EDF2F7 | gray-2 | AAA | F |
#E2E8F0 | gray-3 | AAA | F |
#CBD5E0 | gray-4 | AAA | F |
#A0AEC0 | gray-5 | AAA | F |
#718096 | gray-6 | AA | AA+ |
#4A5568 | gray-7 | F | AAA |
#2D3748 | gray-8 | F | AAA |
#1A202C | gray-9 | F | AAA |
#2D3748 | grayDark | F | AAA |
#F0FFF4 | green-1 | AAA | F |
#C6F6D5 | green-2 | AAA | F |
#9AE6B4 | green-3 | AAA | F |
#68D391 | green-4 | AAA | F |
#48BB78 | green-5 | AAA | F |
#38A169 | green-6 | AA | AA+ |
#2F855A | green-7 | AA | AA |
#276749 | green-8 | AA+ | AA |
#22543D | green-9 | F | AAA |
#EBF4FF | indigo-1 | AAA | F |
#C3DAFE | indigo-2 | AAA | F |
#A3BFFA | indigo-3 | AAA | F |
#7F9CF5 | indigo-4 | AAA | F |
#667EEA | indigo-5 | AA | AA+ |
#5A67D8 | indigo-6 | AA+ | AA |
#4C51BF | indigo-7 | AA+ | AA |
#434190 | indigo-8 | F | AAA |
#3C366B | indigo-9 | F | AAA |
#63B3ED | info | AAA | F |
#F7FAFC | light | AAA | F |
#E2E8F0 | muted | AAA | F |
#FFFAF0 | orange-1 | AAA | F |
#FEEBC8 | orange-2 | AAA | F |
#FBD38D | orange-3 | AAA | F |
#F6AD55 | orange-4 | AAA | F |
#ED8936 | orange-5 | AAA | F |
#DD6B20 | orange-6 | AA | AA+ |
#C05621 | orange-7 | AA | AA |
#9C4221 | orange-8 | AA+ | AA |
#7B341E | orange-9 | F | AAA |
#FFF5F7 | pink-1 | AAA | F |
#FED7E2 | pink-2 | AAA | F |
#FBB6CE | pink-3 | AAA | F |
#F687B3 | pink-4 | AAA | F |
#ED64A6 | pink-5 | AA | AA+ |
#D53F8C | pink-6 | AA | AA+ |
#B83280 | pink-7 | AA+ | AA |
#97266D | pink-8 | F | AAA |
#702459 | pink-9 | F | AAA |
#2B6CB0 | primary | AA+ | AA |
#2C5282 | primaryHover | F | AAA |
#FAF5FF | purple-1 | AAA | F |
#E9D8FD | purple-2 | AAA | F |
#D6BCFA | purple-3 | AAA | F |
#B794F4 | purple-4 | AAA | F |
#9F7AEA | purple-5 | AA | AA+ |
#805AD5 | purple-6 | AA+ | AA |
#6B46C1 | purple-7 | AA+ | AA |
#553C9A | purple-8 | F | AAA |
#44337A | purple-9 | F | AAA |
#FFF5F5 | red-1 | AAA | F |
#FED7D7 | red-2 | AAA | F |
#FEB2B2 | red-3 | AAA | F |
#FC8181 | red-4 | AAA | F |
#F56565 | red-5 | AA | AA+ |
#E53E3E | red-6 | AA | AA+ |
#C53030 | red-7 | AA+ | AA |
#9B2C2C | red-8 | F | AAA |
#742A2A | red-9 | F | AAA |
#718096 | secondary | AA | AA+ |
#9AE6B4 | success | AAA | F |
#E6FFFA | teal-1 | AAA | F |
#B2F5EA | teal-2 | AAA | F |
#81E6D9 | teal-3 | AAA | F |
#4FD1C5 | teal-4 | AAA | F |
#38B2AC | teal-5 | AAA | F |
#319795 | teal-6 | AA | AA+ |
#2C7A7B | teal-7 | AA+ | AA |
#285E61 | teal-8 | F | AAA |
#234E52 | teal-9 | F | AAA |
#2D3748 | text | F | AAA |
#718096 | textMuted | AA | AA+ |
TRANSPARENT | transparent | F | AAA |
#FAF089 | warning | AAA | F |
#FFF | white | AAA | F |
#FFFFF0 | yellow-1 | AAA | F |
#FEFCBF | yellow-2 | AAA | F |
#FAF089 | yellow-3 | AAA | F |
#F6E05E | yellow-4 | AAA | F |
#ECC94B | yellow-5 | AAA | F |
#D69E2E | yellow-6 | AAA | F |
#B7791F | yellow-7 | AA | AA+ |
#975A16 | yellow-8 | AA+ | AA |
#744210 | yellow-9 | F | AAA |
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#3F3F3F #E0E0E0 | accent | F | AAA | F | AAA |
#FFF #060606 | background | AAA | F | AAA | F |
#6C6C6C #999 | gray | AA+ | AA | F | AAA |
#9F9F9F #3C3C3C | highlight | AAA | F | AAA | F |
#E0E0E0 #191919 | muted | AAA | F | AAA | F |
#000 #D2D2D2 | primary | F | AAA | F | AAA |
#3F3F3F #B2B2B2 | secondary | F | AAA | F | AAA |
#000 #FFF | text | F | AAA | F | AAA |
| Score | Contrast ratio | Result |
|---|---|---|
AAA | >= 7.0:1 | Passes WCAG 2.0 AAA |
AA | >= 4.5:1 | Passes WCAG 2.0 AA |
AA+ | >= 3.0:1 | Passes WCAG 2.0 Large Text AA |
F | < 3.0:1 | AA Test failed |