Contrast depends on what a color communicates
Color contrast describes the difference in relative brightness between two colors. In an interface, the useful question is not whether the palette looks bold overall. It is whether a person can distinguish the information or control in front of them from its immediate background. A dark heading on a light page, a search icon inside an input, and the outline of a button may each need a separate check.
For WCAG contrast checks, normal-sized text needs a ratio of at least 4.5:1 against its background. Large text needs at least 3:1. Under WCAG’s definition, large text is roughly 24 CSS pixels at regular weight or 19 CSS pixels at bold weight. These are minimum thresholds, not guarantees that every reader will find the result comfortable. Thin fonts, small sizes, and busy backgrounds can still make text difficult to read.
Meaningful graphics and the parts of interface controls needed to identify them generally need at least 3:1 against adjacent colors. This can apply to an icon that conveys an action, an input border that shows where to type, or a checked-state mark. A purely decorative graphic does not carry the same information requirement. The distinction is about the graphic’s job, not whether it was built with CSS, SVG, or an image.
Compare the colors people actually see
Start with the foreground and the background directly behind it. For text on a solid surface, that is usually straightforward. For an outlined button, compare its outline with the area immediately outside it; then check its label against the button’s fill. If a component uses transparency, compare the rendered result rather than the original color value. An overlay can look different over a white card and a dark image.
A contrast checker can calculate the ratio for two color values, but choosing the right pair is your task. Inspect the component in a browser, note its computed colors, and test the combinations used in the finished layout. If text sits over a photograph or gradient, check its least favorable position. A consistent background behind the text is often easier to maintain than hoping every part of an image remains suitable.
For a reproducible starting point, open a page in a modern browser with a white background (#FFFFFF), black body text (#000000), and a black button with a white label. Each black-and-white text pair has a 21:1 contrast ratio. Then change one color at a time and check the new rendered pair before reusing it. This simple exercise makes it easier to see why a color that works for a large heading may not work for small helper text.
Test components in every meaningful state
A default-state screenshot is not a complete contrast test. Check controls when they are hovered, focused, selected, expanded, or showing an error. A button label might pass on its default fill but become hard to read on hover. A selected tab might rely on a pale border that disappears into its surrounding panel. Check text and the visual cues that communicate each state separately.
A disabled control may be exempt from some WCAG contrast requirements, but that does not make faint disabled text a good default. People still benefit from understanding what the control is and why it cannot be used. Likewise, a focus indicator should remain easy to find wherever the control appears. Test it against nearby surfaces, including cards or panels with different backgrounds.
Contrast is also not a substitute for another cue. If links appear within paragraphs, an underline or another visible treatment can help readers identify them without relying on color alone. For errors, pair a color change with clear text and an identifiable indicator. These additions help when colors are difficult to distinguish and make the interface’s meaning more explicit.
Build a repeatable review habit
Keep a small inventory of the color pairings used by your components: body text on the page, muted text on cards, labels on buttons, icons on control fills, and borders against surrounding surfaces. Record their intended use alongside the values. A passing pair for large text should not silently become the style for a small caption.
Review the inventory whenever a theme or component state changes, then inspect representative pages in the browser. Automated checks can flag many text contrast problems, while visual inspection helps you notice gradients, images, transparency, and unclear control boundaries. The goal is not to maximize contrast everywhere. It is to make each piece of information and each available action reliably distinguishable in the context where people use it.
