Color contrast
Contrast requirements for text, controls and focus indicators, and how to keep the CoreUI for React palette and themes within them.
WCAG asks for a contrast ratio of 4.5:1 for text (3:1 for large text), and 3:1 for the parts of a control and the graphics a user needs to see, such as a field’s border, a checkbox or a focus indicator (non-text contrast).
Default palette
Some combinations of colors that currently make up CoreUI’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to insufficient color contrast (below the recommended WCAG 2.2 text color contrast ratio of 4.5:1 and the WCAG 2.2 non-text color contrast ratio of 3:1), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.
The color page shows the contrast ratio of each palette color against white and black.
Theme colors
Each theme color comes as a family of slots, and every foreground slot is tuned against one background slot: contrast on bg, fg on bg-subtle, fg-emphasis on bg-muted. Components pair them that way. When you build your own surfaces, use the same pairings; a foreground read against another background is where contrast falls apart. When you add a theme color or change one, check every pairing again, in both color modes.
Fading a color lowers its contrast as well: the link opacity and opacity utilities can take a link or a text below 4.5:1.
Focus indicators
Focusable components draw a focus ring from the --cui-focus-ring-* tokens, in the color of their theme. Controls you click to act, such as buttons, checkboxes and pagination links, show it on keyboard focus; fields you type into show it on any focus. If you change the ring’s color, width or offset, keep it at 3:1 against the colors around it. The focus ring helper gives your own elements the same ring.
Color alone
Color must not be the only way a meaning is conveyed (use of color). A red border on an invalid field needs a message that says what is wrong, a danger alert needs words that say it is one, and a link inside a paragraph needs an underline or another cue besides its color. Where the text cannot carry it, add it with visually hidden content.