Panel: Coloring
The Fora11y coloring panel is still in beta. We advice not to use the ‘main color’, this will be deprecated in a future version. Use the default WordPress ‘color’ panel. Or use the coloring panel in ‘custom colors’ mode.
Fora11y custom coloring panel. Apply color to components based on the colors set in the customize settings which should comply with WCAG 2.1 AA.
Main color
Deprecated
core/paragraphThe main color for the component. This can be the text color but can also be a decorative element like an icon or a bullet list.
If not set, the base color is used (default)
Options
- primary
- secondary
- tertiary
- neutral
The selected color is automatically set based on the closest parent background-color. If the parent background is dark, the main color is light. When the background is light, the main color is dark. This is to maintain a large contrast between fore- and background-color.
Background color
core/paragraphSet the background color for the component.
Options
- base light
- base dark
- primary light
- primary dark
- secondary light
- secondary dark
- tertiary light
- tertiary dark
- neutral light
- neutral dark
Custom colors
Enable this setting to freely define the component colors.
When custom colors are used, we can’t force the WCAG guidelines. You need to check to contrast of custom colors yourself!
Text Color
core/paragraphSet the color of the text.