Color Contrast Accessibility
Go directly to Contrast Grid to edit the color grid using the colors from the Kadence color palette.
Color Tools:
- Contrast Grid
- Web Aim Contrast Checker (creates accessible options)
- Accessible Color Palette Generator
- Accessible Color Palette Builder
- A11y Rocks
Background
Text
|
#FFFFFF
|
#F1F7F1
|
#D8E0D8
|
#4F5C72
|
#324C67
|
#363F4E
|
#112A46
|
#1C731D
|
#E6A227
|
---|---|---|---|---|---|---|---|---|---|
White
#FFFFFF
|
Text
AA
6.7
|
Text
AAA
8.8
|
Text
AAA
10
|
Text
AAA
14.5
|
Text
AA
5.9
|
||||
LIghter Background
#F1F7F1
|
Text
AA
6.2
|
Text
AAA
8.1
|
Text
AAA
9.7
|
Text
AAA
13.3
|
Text
AA
5.4
|
||||
Subtle Background
#D8E0D8
|
Text
AA
5
|
Text
AA
6.5
|
Text
AAA
7.8
|
Text
AAA
10
|
|||||
Subtle Text
#4F5C72
|
Text
AA
6.7
|
Text
AA
6.2
|
Text
AA
5
|
||||||
Medium Text
#324C67
|
Text
AAA
8.8
|
Text
AAA
8.1
|
Text
AA
6.5
|
||||||
Strong Text
#363F4E
|
Text
AAA
10
|
Text
AAA
9.7
|
Text
AAA
7.8
|
Text
AA
4.8
|
|||||
Strongest Text
#112A46
|
Text
AAA
14.5
|
Text
AAA
13.3
|
Text
AAA
10
|
Text
AA
6.6
|
|||||
accent
#1C731D
|
Text
AA
5.9
|
Text
AA
5.4
|
|||||||
Accent alt
#E6A227
|
Text
AA
4.8
|
Text
AA
6.6
|
|||||||
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
|