accessibility: color contrast insufficient to pass AA
Author: hetd54Created Sep 15, 2026Updated Sep 15, 2026
Description
When running accessibility checker tools (ex: WAVE), there is very low contrast between text and background colors on the following elements:
Light Mode:
- fg.warning
- fg.subtle
- fg.error
- fg.success
Dark Mode:
- fg.subtle
Link to Reproduction
https://chakra-ui.com/docs/theming/colors
Steps to reproduce
- Go to '...'
- Click on '...'
- Scroll down to '...'
- See error
Chakra UI Version
3.37.0
Browser
Chrome
Operating System
- macOS
- Windows
- Linux
Additional Information
This ends up affecting buttons, which I have been working around by updating the theme:
const buttonRecipe = defineRecipe({
compoundVariants: [
{
colorPalette: "teal",
variant: "solid",
css: {
bg: "teal.700",
_hover: { bg: "teal.700/90" },
_expanded: { bg: "teal.700/90" },
},
},
{
colorPalette: "cyan",
variant: "solid",
css: {
bg: "cyan.700",
_hover: { bg: "cyan.700/90" },
_expanded: { bg: "cyan.700/90" },
},
},
{
colorPalette: "green",
variant: "solid",
css: {
bg: "green.700",
_hover: { bg: "green.700/90" },
_expanded: { bg: "green.700/90" },
},
},
{
colorPalette: "orange",
variant: "solid",
css: {
bg: "orange.700",
_dark: { bg: "orange.500" },
_hover: { bg: "orange.700/90" },
_expanded: { bg: "orange.700/90" },
},
},
],
});It would be helpful for the base chakra ui to be accessible and meet a minimum of AA compliance per new regulatory requirements set to go into effect in 2027.
Source: chakra-ui/chakra-ui