A complementary color relationship pairs colors positioned directly opposite each other on the color wheel. The opposition creates a bold, harmonious combination with strong visual contrast. section 9.2.1
Complementary colors work best when one color dominates and the other acts as an accent. Adding a neutral such as black, white, or gray prevents the interface from relying on only two intense colors. section 9.2.1
Use the relationship to guide attention rather than applying both colors everywhere:
- Choose a primary color for the dominant brand or structural areas. section 9.2.1
- Reserve the complementary color for accents, calls to action, badges, or other elements that deserve attention. section 9.2.1
- Test text contrast and avoid using color alone to communicate information; add labels or icons when needed. section 9.9
Muted blue and golden yellow travel interface
A travel website uses muted blue as its primary color and golden yellow as its complementary accent. Blue supports the header and footer, while yellow highlights the search button, Trending Packages card, and Group Travel button, leading attention through the page. section 10.7
