Color Grid
Consider using this if you need to provide more context on why you do what you do. Be engaging. Focus on delivering value to your visitors.
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
|
#F7FFFF
|
#EFF7F7
|
#CE5C17
|
#3F4958
|
#002868
|
#031E5C
|
#FED700
|
#BF0A30
|
---|---|---|---|---|---|---|---|---|---|
White
#FFFFFF
|
Text
AAA
9.1
|
Text
AAA
13.9
|
Text
AAA
15.6
|
Text
AA
6.3
|
|||||
Lighter Background
#F7FFFF
|
Text
AAA
8.9
|
Text
AAA
13.7
|
Text
AAA
15.4
|
Text
AA
6.2
|
|||||
Subtle Background
#EFF7F7
|
Text
AAA
8.3
|
Text
AAA
12.8
|
Text
AAA
14.3
|
Text
AA
5.8
|
|||||
Subtle Text
#CE5C17
|
|||||||||
Medium Text
#3F4958
|
Text
AAA
9.1
|
Text
AAA
8.9
|
Text
AAA
8.3
|
Text
AA
6.4
|
|||||
Strong Text
#002868
|
Text
AAA
13.9
|
Text
AAA
13.7
|
Text
AAA
12.8
|
Text
AAA
9.9
|
|||||
Strongest Text
#031E5C
|
Text
AAA
15.6
|
Text
AAA
15.4
|
Text
AAA
14.3
|
Text
AAA
11.1
|
|||||
Accent-Alt
#FED700
|
Text
AA
6.4
|
Text
AAA
9.9
|
Text
AAA
11.1
|
Text
AA
4.5
|
|||||
Accent
#BF0A30
|
Text
AA
6.3
|
Text
AA
6.2
|
Text
AA
5.8
|
Text
AA
4.5
|
|||||
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
|