Complementary colors sit opposite each other on a color wheel. On a traditional artist's color wheel, familiar examples include red and green, blue and orange, and yellow and violet. That relationship can suggest a lively brand pair, but it doesn't tell you whether the pair will make text readable, communicate an interface state, or reproduce well in print.
The wheel is a starting point. The real decision comes from testing the exact color values in each job they need to do.
Start with exact values, not color names
“Blue and orange” describes a relationship, not a finished palette. Each color covers a wide range of light, dark, muted, and vivid values. The wheel or digital color tool you use determines the actual pair.
Record the proposed screen colors as hex or RGB values before reviewing them. For example, write #______ rather than “blue.” This gives you something precise to enter into a contrast checker, share with a designer, and compare after a revision.
If you haven't chosen the main brand color yet, begin with the guide to choosing a brand color. A color wheel can help find its complement, but it can't choose the right starting color for your business.
Give each color a job
Decide where each color will appear before judging the pair. A palette may look convincing as two swatches and fail as soon as small text, a button, or an error message is added.
List the intended roles:
- dominant page or packaging surface
- accent
- body text
- button and button label
- border, icon, or focus indicator
- status or chart cue
- printed item, if relevant
The two complementary colors don't need to fill every role. A neutral background or text color may make the system clearer and easier to use.
As an initial design direction, let one color lead and use the other as an accent. This is not a fixed ratio. The right balance depends on the exact values, the area each color covers, the content, and the medium. Judge it in the layout rather than enforcing a universal percentage.
Check every text and background pair
Color-wheel distance is not the same as readable contrast. Enter the exact foreground and background values into a contrast checker. The checker returns a ratio, so you don't need to calculate it yourself.
For WCAG 2.2 Level AA, Success Criterion 1.4.3 sets a minimum contrast ratio of:
- 4.5:1 for normal text
- 3:1 for large-scale text
Check each use separately. Body copy on a page, text on a button, and a label inside a colored banner may all combine different foreground and background values. Test the real text size and weight rather than assuming one result covers the whole palette.
Use the W3C definition in the linked guidance to decide whether text qualifies as large-scale. Ask the designer or developer for the rendered font size and weight. If you cannot confirm that the text qualifies, test it against the stricter normal-text ratio. Do not assume that every heading belongs in the large-scale category.
Text that is part of a logo or brand name is exempt from this specific WCAG criterion. That exemption doesn't extend to navigation, buttons, form labels, small taglines, or ordinary page text simply because they use brand colors.
If a text pair fails, change one of the values, place the text on a neutral color, or choose a different text color. Swapping one complementary hue for another doesn't guarantee a better ratio. The new pair still needs to be measured.
W3C's color contrast check explains how to test sampled colors or enter their RGB or hex values. A grayscale view can expose weak separation quickly, but it does not produce the required ratio or complete an accessibility review.
Check controls, icons, and other visual information
Text is only one use of color. Where WCAG 2.2 Success Criterion 1.4.11 applies, it requires at least 3:1 contrast against adjacent colors for the visual information needed to identify interface components, their states, and meaningful graphical objects. For a website or app, ask the designer or developer to identify the visible parts needed to recognize and use each control and state. Use the linked guidance or an accessibility reviewer when it is unclear whether the criterion applies.
Test the actual design, including default, hover, focus, selected, error, and disabled states where they exist. A palette swatch cannot show whether a thin border disappears against its background or whether an icon remains identifiable.
Contrast is not the only check. WCAG 2.2 Success Criterion 1.4.1 says color cannot be the only visual way to convey information, indicate an action, request a response, or distinguish an element. Add another visible cue when color carries meaning:
- a text label with a status color
- an icon with an error message
- an underline for a link
- a pattern or shape in a chart
This matters even when the colors have strong contrast. A reader still needs to know which color means “valid,” “late,” or “unavailable.” A grayscale view or color-vision simulation may reveal a problem, but neither replaces measured contrast and a non-color cue.
Passing these checks does not establish complete WCAG conformance or guarantee readability for every person. It confirms only the uses you tested against the stated criteria.
Treat print as a separate test
A complementary relationship does not cause a color to shift between screen and print. Reproduction depends on the output device, color profiles, available gamut, ink, paper, and viewing conditions.
Ask the printer which file setup and color profile the job requires. If color accuracy matters, approve a proof prepared for the intended printer, ink, and paper.
Adobe's guidance distinguishes a soft proof, which previews a particular output setup on a monitor, from a hard proof made for a specific output process. It also notes that preview reliability depends on the monitor, profiles, and viewing conditions. Some RGB colors may fall outside a printer profile's gamut, meaning the range of colors that profile can reproduce. See Adobe's explanations of proofing and color-managed documents and printer profiles and output.
Converting a hex value to CMYK or printing a sample on an office printer is not enough to approve the result for a commercial print job. Keep the print proof and the screen contrast check as two separate decisions.
Record one complete test
Use this compact record for one proposed pair. Add rows if the design contains more combinations or states.
| Check | Record |
|---|---|
| Dominant screen color | Hex or RGB: __ |
| Complementary accent | Hex or RGB: __ |
| Intended roles | Dominant surface: __; accent: __; text: __; controls or charts: __ |
| Normal text pair | Foreground: __; background: __; checker result: __:1; pass or revise: __ |
| Large-scale text pair | Foreground: __; background: __; checker result: __:1; pass, revise, or not applicable: __ |
| Control, icon, border, or chart detail that must remain visible | Element: __; adjacent color: __; result: __:1; pass, revise, or not applicable: __ |
| Meaning without color | Label, icon, underline, pattern, shape, or other cue: __ |
| Real layout checked | Page, state, text size, device, and screen or browser-window size: __ |
| Print use | Item: __; printer setup and profile: __; proof approved: yes, no, or not applicable |
| Decision | Keep, revise, or limit the pair to named roles: __ |
If a result fails, revise the exact use that failed. You may need a darker or lighter value, neutral text or background, a stronger border, or another cue for meaning. The complementary relationship can remain part of the palette even when the two colors should not sit directly on top of each other.
Mischka Studio's branding services can help define palette roles, screen and print values, and brand guidelines. Accessibility conformance and color reproduction still need to be checked in the final website, interface, and print process.
