Brand Color Palette Contrast Matrix: Test Every Pair

Executive Summary

A brand color palette is usually approved as a set of swatches, but contrast is a property of a pair: one foreground color on one specific background, at a stated size and weight, in a stated state. The Web Content Accessibility Guidelines (WCAG) 2.2 Recommendation, dated 12 December 2024, sets the numbers that matter for most brand work ^[1]. Text and images of text need a contrast ratio of at least 4.5:1 ^[2], large-scale text needs 3:1 ^[3]. Non-text elements, such as control outlines and meaningful icons, have their own 3:1 test. This report turns those thresholds into a copyable, role-based brand color palette contrast matrix: a table that grants each foreground/background pair explicit permission for particular jobs (body text, headings, links, controls, decoration) and records what is forbidden.

The report builds an original fictional palette of nine swatches and three tested variants. Of its 36 unordered base-color pairs, calculated here with the WCAG formula, 11 reach 4.5:1, 4 fall between 3:1 and 4.5:1, and 21 fall below 3:1. A count like that is an inventory aid, not an accessibility score. The more useful finding is behavioral: the original coral accent (#FF6B57) reaches only 2.62:1 on the paper background, so it cannot carry body copy, and white text on it reaches 2.80:1. A darker text variant (#B3392B) reaches 5.56:1 on the same background, while the original coral stays available for decoration and for dark-text button fills (5.15:1).

Three limits keep the matrix honest. Computed ratios must not be rounded, and W3C's own example is that 4.499:1 does not meet 4.5:1 ^[4]. A passing pair does not settle link identification, meaning conveyed by color alone, gradients or transparency. And conformance is defined for whole web pages, so no matrix proves a site conforms.

The evidence that this matters at scale is the WebAIM Million 2026 analysis: low-contrast text was found on 83.9% of the home pages it tested ^[5], and it was the most commonly detected issue ^[5]. Free tools already test pairs, and the Directed Edges grid tests many at once ^[6]. The incremental piece is the handoff specification: roles, backgrounds, states, correction requests and a revision owner that a marketing lead can read without implementing a design system. This report does not replace a specialist assessment of a full site.

Introduction and Background

Marketing leads, agency creative reviewers and designers share a recurring review problem. A brand guide lists swatches with names and hex values. A landing page, a sales deck or a social template then uses those swatches in combinations the guide never tested: a bright accent as link text, white lettering on a mid-tone button, a pale tint behind gray captions. Each combination is a separate contrast decision, and the swatch table alone does not make it.

WCAG defines the measurement. Contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05) ^[1], where L1 and L2 are the relative luminances of the lighter and darker colors. Relative luminance is defined as the relative brightness of any point in a colorspace, computed with the weights L = 0.2126 * R + 0.7152 * G + 0.0722 * B ^[1] after each sRGB channel is linearized. Ratios range from 1 to 21. The 21:1 of black on white is therefore a formula ceiling, not a usability benchmark, and nothing in the standard says higher is always better for every reader or use.

The WCAG 2.2 Recommendation is the normative source for requirements, and its Understanding documents are informative explanations. The standard is also stable ground: content that conforms to WCAG 2.2 also conforms to WCAG 2.0 and 2.1 ^[1], and the WCAG 3 draft states that it does not replace WCAG 2. The W3C Web Accessibility Initiative advises that the best preparation for WCAG 3 is to meet WCAG 2.2 success criteria now ^[7]. This report uses WCAG 2.x thresholds only. It does not apply them to print production and makes no jurisdiction or deadline claims.

The scope is deliberately narrow. This is a concrete brand-guide deliverable, not an accessibility audit and not a recommendation to rebrand. It specifies how to convert a palette into explicit permissions, shows the arithmetic so a reviewer can reproduce every number, and points to the free tools that already exist for checking pairs. The fictional example, "Marlow & Finch", is a three-person bookkeeping studio invented for this report. Its palette is not copied from any institution's.

Key Changes in How Brand Colors Are Approved

From swatch approval to pair approval

WebAIM's article on contrast explains that WCAG expresses contrast as a ratio ranging from 1:1 (white on white) to 21:1 ^[3]. Because a ratio exists only between two colors, a swatch cannot be "accessible" by itself. MDN Web Docs frames the same idea as a choice: designers choose foreground and background colors that have good contrast ^[2].

The background must therefore be named. The Understanding document for Success Criterion 1.4.3 states that contrast is measured with respect to the specified background over which the text is rendered, and that white is assumed if no background color is specified ^[4]. A matrix row that says only "Lagoon: passes" is incomplete. A row that says "Lagoon on white: 4.15:1, large text only" is a decision someone can enforce.

From one threshold to role-specific thresholds

WCAG does not apply one number to every use. Success Criterion (SC) 1.4.3, Contrast (Minimum), is a Level AA criterion ^[8] that requires 4.5:1 for text and images of text ^{[1] [9]}, with large-scale text reduced to 3:1 ^[1]. WCAG defines large scale as at least 18 point, or 14 point bold ^[2]. The enhanced criterion, SC 1.4.6 (Level AAA), asks for 7:1 ^[2] and 4.5:1 for large-scale text ^[8], which is optional for most brand work.

SC 1.4.11, Non-text Contrast, is a separate Level AA criterion with a 3:1 requirement ^[3]. It covers the visual information required to identify user interface components and states, except for inactive components, and the parts of graphics required to understand the content ^[1]. A brand button border, an input outline, a focus ring, a chart line or an icon that carries meaning therefore belongs to a different role than body text and is tested against a different threshold.

Two sources disagree slightly on pixel equivalents for large text. The Understanding document states that 14 point and 18 point are equivalent to approximately 18.5px and 24px ^[4], while the WebAIM checker says large text is 14 point (typically 18.66px) and bold or larger ^[8], and MDN lists 18.66px bold or 24px ^[10]. A matrix should state its own working numbers (this report uses 24px regular and 18.66px bold, the more conservative reading for the bold case) and avoid borderline sizes.

From a single brand color to an original plus a tested variant

A palette can keep identity colors and still gain usable text colors. A June 22, 2026 guide at colorcontrast.org describes keeping the original brand colors unchanged ^[11] alongside slightly adjusted versions optimized for WCAG AA compliance ^[11], with a palette labeled for text, buttons and interactive elements ^[11]. That guide covers the idea well; the matrix here adds a pair-level permission table with named backgrounds and states.

Design systems formalize the same split through roles. Atlassian says color roles describe the intention behind the color (Source: atlassian.design), and its inverse tokens are designed to show on bold backgrounds (Source: atlassian.design). Carbon names and groups its core color tokens by the common UI element they are applied to ^[12], and Material's Android documentation describes on-colors as used for content such as icons and text on top of the accent color ^[13], adding that the difference in tone between two colors creates visual contrast ^[13]. A small business does not need a token system, but the idea transfers: each approved color should say what it is for.

From static swatches to states, transparency and gradients

States multiply pairs. The Understanding document for 1.4.11 lists focus, hover, select, press, check, visited/unvisited, and expand/collapse as examples of states ^[14]. Each state of a control is therefore its own pair to check, including text that appears on hover or focus and any custom focus indicator.

Transparency changes the pair because the visible color depends on what lies behind it. MDN describes alpha values as running from fully transparent at 0% to fully opaque at 100% ^[15]. The WebAIM checker accepts an alpha value to adjust the transparency of the foreground color ^[8], but a matrix should record the composited hex value, not the nominal one. MDN also warns that opacity applies to the element as a whole, including its contents ^[16], and repeats that a ratio of 4.5:1 is required for text content ^[16], so faded text inside a faded container compounds.

Gradients and photos need the same discipline. The W3C pages reviewed for this report did not state a single rule for text over gradients, so the working rule in this report (test the lowest-contrast sampled point under the text) is practice, not a quotation of the standard.

Implementation Considerations and Process Changes

Inventory roles, backgrounds, sizes and states

A workable inventory covers body text, captions, headings, links, button labels, fills and borders, form outlines, focus indicators, meaningful icons, charts, status indicators and pure decoration. For each, record the backgrounds it will really appear on (paper, tinted panel, dark footer, photo overlay), the size and weight, and the states (default, hover, focus, active, disabled, visited).

Two exceptions shape the inventory. Text that is decorative and conveys no information is excluded from 1.4.3 ^[4], and text in a logo or brand name has no contrast requirement ^[3].

Calculate, then check independently

The method is short. Convert each hex channel to 0 to 1, linearize it (divide by 12.92 at or below 0.04045, otherwise raise (c + 0.055) / 1.055 to the power 2.4), weight the channels, then apply the ratio formula.

Worked example, calculated for this report: coral #FF6B57 has linear channels of 1.00000, 0.14703 and 0.09531, giving a relative luminance of 0.32464. Paper #FAF7F2 has linear channels of 0.95597, 0.93011 and 0.88792, giving 0.93256. The ratio is (0.93256 + 0.05) / (0.32464 + 0.05) = 2.6227, reported as 2.62:1. That is below even the 3:1 large-text threshold. These values were calculated directly, not copied from a tool. The same pair can be entered into the WebAIM checker as an independent check; when two tools differ in the second decimal place, record the unrounded value and the tool that produced it.

Rounding is the main discipline. As noted in the Executive Summary, W3C's guidance is that computed values should not be rounded, and the 4.5:1 and 3:1 values are thresholds. A first-draft teal text color in the fictional palette, #1B7F80, computes to 4.472:1 on paper. Displayed to one decimal place that would read 4.5:1, and it must not be accepted. A matrix should store at least three decimal places and show two.

Table 1 below lists the pair-testing resources reviewed, with documented behavior only.

Binghamton University requires level AA for all digital content ^[19], and its knowledge-base article recommends the grid when you want to put in many hex colors and see how all combinations pass or fail ^[19]. It also notes a tool limit worth knowing: ColorZilla does not tell you the contrast ratio or pass/fail status ^[19]. The Directed Edges grid names WCAG 2.0 minimum contrast, which matches the text thresholds discussed above. None of these tools states a role, a named background or an approval revision, which is the gap the matrix fills.

Mark each pair allowed, restricted or unsuitable

Three statuses are enough. Allowed means the pair meets the threshold for the stated role at any size within the stated type scale. Restricted means it meets a lower threshold only under named conditions, such as large text, or non-text elements at 3:1. Unsuitable means it meets neither, and the pair may appear only as decoration that carries no information. UWF follows the same logic in its brand table: pairs at 4.5:1 or higher pass ^[18], 3:1 to 4.49:1 pairs may only be used as large text ^[18], may also serve graphical objects and user interface components but should be used sparingly ^[18], and the remaining combinations are not permitted for use ^[18].

The restriction for large text must carry its exact conditions into the matrix: minimum size, weight, and the design-system style that guarantees them. "Large text only" printed in a table is an instruction a template can silently violate when a headline is reflowed to a smaller mobile size. Binding the restriction to a named style ("H1, 32px/700 and above") makes it reviewable.

Approve functional variants and preserve identity

When an identity color fails a role, three responses exist: retire the use, change the background, or approve a variant. Retiring the use is often cheapest. Adding a variant keeps the original swatch intact for illustration, patterns, large decorative shapes and logo contexts, and adds a text-capable sibling. The USWDS approach shows why systematic variants help: its "magic number" is the difference in grade between any two colors ^[20], with a difference of 40 or more mapping to WCAG AA large text contrast ^[20] and 50 or more to AA contrast or AAA large text ^[20]. Each grade conforms to a specific range of relative luminance ^[20]. USWDS also draws each theme token from a system color token ^[21], so a named role resolves to a tested value. A small palette can achieve the same effect by hand, as long as each variant is tested and recorded.

A variant needs a hex value, its parent swatch, the exact backgrounds it is approved for, and an approver.

Hand the matrix to the designer

The handoff has four parts: the editable table (a spreadsheet or the brand guide itself), a test link or recorded checker output for every row, a change owner, and a revision label. Adobe Spectrum's guarantee illustrates why scope matters: it says its tokens are guaranteed to meet or exceed WCAG contrast minimums ^[22], but only for those tokens used as intended. A brand matrix gives the same scoped promise in plain language: this pair, this role, this background, this revision.

Designers should receive correction requests in the same vocabulary: "M8 (Coral on Paper, body link) is Unsuitable at 2.62:1. Replace the link color with Coral Text on Paper (M9). To use the Harbor Ink panel instead, set the link in Paper (M4), or add a new matrix row for Coral on Harbor Ink (5.15:1) before using it, because that pair is not yet listed."

Data Analysis and Evidence

The fictional palette and its variants

Table 2 below lists the swatches of the fictional Marlow & Finch palette with relative luminance calculated for this report using the WCAG formula. The first nine rows are the original palette; the last three are proposed functional variants awaiting approval.

Table 2 gives the inputs; it does not decide anything. The decisions appear when luminances are combined into pairs. Among the nine original swatches there are 36 unordered pairs. By calculation, 11 reach 4.5:1 or higher, 4 fall from 3:1 up to but not including 4.5:1 (Harbor Ink with Lagoon at 3.48, Paper with Lagoon at 3.88, Coral with Plum at 3.87, and Lagoon with Mist at 3.55), and 21 fall below 3:1. These counts are an inventory aid. They do not say how accessible any piece of collateral is, because they ignore size, state, adjacent colors and meaning.

The role-based matrix

Table 3 below is the copyable matrix. Ratios are calculated, unrounded values shown to two decimals; none was rounded upward to pass. Thresholds follow SC 1.4.3 (4.5:1 normal text, 3:1 large text) and SC 1.4.11 (3:1 for required component and graphic information). The matrix covers text and non-text roles separately, as the standard does.

Three patterns recur in Table 3. First, dark-background pairs often pass where the same color on Paper does not: Sage reaches 6.74:1 on Harbor Ink but 2.01:1 on Paper, and Marigold reaches 7.19:1 on Harbor Ink but 1.88:1 on Paper. Second, a contrast ratio is symmetric, but a role is not: Coral on Harbor Ink is 5.15:1, so Coral could be approved as a text color on the dark panel (a new row, since it is not yet listed), yet it must still not appear as text on Paper. Third, Lagoon's 3.88:1 is useful for large display type and graphic elements but not for body copy, which mirrors the large-text-only treatment seen in UWF's published table ^[18].

Row M15 deserves attention because the ratio that governs it is not text-to-background. Technique G183 addresses inline links that are only distinguished from static non-link text by color and lightness, and it suggests an underline or bold text as an alternative or additional way to indicate links ^[23]. The Understanding document for use of color adds that authors must continue to ensure that all text links meet contrast minimums ^[24]. Lagoon Text passes against its background (6.03:1) but only reaches 2.24:1 against Harbor Ink body text, so the matrix requires an underline. Carbon's link guidance takes the same two-sided approach: link text has sufficient contrast with both its background and surrounding body text ^[25], and non-underlined links receive an underline on focus ^[25].

Why the stakes are broad

The WebAIM Million analysis tested the home pages for the top 1,000,000 web sites ^[5]. It reports low-contrast text on 83.9% of home pages ^[5], and 95.9% of home pages with detected WCAG 2 failures ^[5]. WebAIM cautions that not all conformance failures can be automatically detected ^[5], so these are floors for what automated detection finds, not complete rates.

The National Eye Institute defines low vision as a vision problem that makes it hard to do everyday activities ^[26]. On the human side, the National Eye Institute says about 1 in 12 men have color vision deficiency ^[27], and NIH MedlinePlus Genetics (from the National Library of Medicine) says red-green color vision deficiency occurs in about 1 in 12 men and 1 in 200 women ^[28], with an estimate of about 2.5 percent of individuals worldwide ^[28]. The World Health Organization estimates that at least 2.2 billion people have a near or distance vision impairment (Source: www.who.int). Section508.gov notes that people with low vision may be unable to read text that is too similar in color to the background ^[9]. These figures describe audiences, not conformance outcomes, and no conversion or readability lift is claimed.

Case Studies and Real-World Examples

The three requests below are hypothetical examples built on the fictional palette. They show how the matrix converts a design request into a decision.

Request 1: accent used as body copy (Hypothetical Example)

A designer sets a pricing-page note in Coral on Paper to "make the brand pop". Looking up the pair gives row M8: 2.62:1, Unsuitable, with no text use permitted at any size. MDN states that text and its background should have a contrast ratio of at least 4.5:1 ^[2], and the large-text relief starts at 3:1, so neither route is available. The reviewer's correction request is to use Coral Text (row M9, 5.56:1 on Paper).

• Before: Coral #FF6B57 text on Paper, 2.62:1.
• After: Coral Text #B3392B on Paper, 5.56:1; the original Coral remains in the illustration and the underline rule under the heading, where it carries no information.
• Identity effect: the original swatch is preserved; only the text use moved to the variant.

Request 2: reversed call-to-action (Hypothetical Example)

The designer proposes a white label on a Coral button for the dark footer, whose background is Harbor Ink. White on Coral is 2.80:1 (row M7 lists this as forbidden), and Paper on Coral is 2.62:1. The compliant pair is Harbor Ink on Coral at 5.15:1. For the hover state, the fill is lightened to 85% Coral over 15% Paper, composited to #FE806E; Harbor Ink on that composite is 5.86:1, so the hover state still passes. The button also has a boundary question, and on the footer it is measured against Harbor Ink, not Paper: Coral against Harbor Ink is 5.15:1, and the hover fill against Harbor Ink is 5.86:1, both above 3:1, so no extra border is needed. A Harbor Ink border would be invisible on this footer anyway. The focus ring is set in Paper, which is 13.51:1 on Harbor Ink (the pair in row M4); Plum would not work here, because it is only 1.33:1 on Harbor Ink. Each ratio above names its own background because the state rule is to check each state's composited colors against the surface the control actually sits on.

• Before: white label on Coral fill, 2.80:1; hover unrecorded; no stated focus indicator.
• After: on the Harbor Ink footer, Harbor Ink label on Coral, 5.15:1; hover composite #FE806E at 5.86:1 (label) and 5.86:1 (fill against the footer); Coral fill against the footer, 5.15:1; focus ring in Paper, 13.51:1 on Harbor Ink (row M4).

Request 3: colored status labels without text (Hypothetical Example)

An invoice table shows "Paid", "Overdue" and "Draft" as colored dots only: Lagoon, Coral and Slate. SC 1.4.1 says color is not used as the only visual means of conveying information ^[3], and the Understanding document's remedy is to use information in addition to color, such as shape or text, to convey meaning ^[24]. Adobe Spectrum's guidance says the same in design-system terms: do not use color alone as a method of communication ^[22]. Separately, the Coral dot against Paper is 2.62:1, under the 3:1 that graphical objects need when they are required to understand the content.

• Before: three colored dots, one at 2.62:1 against Paper, no text.
• After: a text label in Harbor Ink (13.51:1) beside each dot, a distinct icon shape per status, and the Overdue dot in Coral Text (5.56:1 on Paper). The dots now reinforce the meaning rather than carry it.

The same discipline applies to gradients. A Marigold-to-Coral hero gradient with Harbor Ink text samples at 7.19:1 at the Marigold end and 5.15:1 at the Coral end, with every intermediate step sampled in between at or above 5.15:1 (calculated for this report in 10 percent steps in sRGB interpolation). White text on the same gradient reaches 2.80:1 at its best point, which is a fail along the whole gradient.

Implications and Future Directions

For a marketing lead, the main change is a review question. "Does this use the brand colors?" becomes "Which row of the matrix permits this pair for this job?" That wording makes review reproducible and shortens disagreements to a table lookup. Teams that commission work from an external studio or a subscription design service can attach the matrix to the request brief, so the first draft arrives already respecting it.

For agencies, the matrix defines when a variant request needs client approval. The rule is simple: a new foreground/background pair that does not appear in the matrix, or a new hex not in Table 2, is a change request with a named owner. That protects both sides, since the client sees every identity color change and the designer sees every restriction before production.

Limits are important, and this report states them plainly. A passing pair alone does not settle link identification, meaning conveyed only by color, gradients, transparency or whole-page conformance. W3C's own test rule for text contrast says passing the rule does not necessarily mean the corresponding success criterion is met ^[29]. WCAG conformance can only be claimed for whole web pages, and it cannot be achieved if part of a web page is excluded ^[1]. Whole-site evaluation is a distinct activity: the WCAG-EM methodology is used for thorough evaluation of digital products using WCAG 2 ^[30]. For that, and for questions of legal obligation in a specific market, a specialist assessment is the appropriate route. Role allocation and whole-site evaluation are the subject of a separate accessibility guide.

Other open questions remain. Typeface weight matters too: a pass for a light-weight display face is weaker evidence than one for a regular weight. WCAG 3 is a Working Draft that the W3C says should not be cited as other than a work in progress ^[31]; if a later standard changes the measurement method, a matrix with stored hex values, roles and revisions can be re-run quickly. Demand for a separate practical matrix beyond free tools and an existing brand guide has not been quantified here and should be tested with real commissioning examples.

Frequently Asked Questions (FAQs)

What is a color pair usage matrix?

It is a table that lists specific foreground/background pairs and gives each one a role, a calculated ratio, a criterion, a status and an allowed/forbidden use. Table 3 is a worked example. It differs from a swatch page because it grants permission per use, not per color.

How to test a brand color palette

Inventory the roles and backgrounds, calculate relative luminance and ratio for each pair using the WCAG formula, check each result in an independent tool such as the WebAIM checker ^[8], and mark each pair allowed, restricted or unsuitable. Test the states and any composited transparency separately, and store unrounded values.

Which brand color combinations pass WCAG?

Those that reach the threshold for their role. For normal text on a stated background, 4.5:1 ^[2]; for large-scale text, 3:1 ^[3]; for required component and graphic information, 3:1 ^[8]. In the fictional palette, 11 of 36 base pairs reach 4.5:1. Any other palette must be calculated afresh.

What makes an accessible color palette for brand design?

An accessible color palette is one where every approved text, link and control pair has a documented ratio that meets its role's threshold, and where identity colors that miss a threshold are limited to decoration or paired with a tested variant. The accessibility belongs to the pairs and their documented uses. Brand color accessibility guidelines that stop at a swatch list leave that decision to each designer.

Which color contrast checker suits brand colors?

Any that reports the unrounded ratio and states which criterion it applies. WebAIM's checker is the one that Stanford links to for colors outside its palette ^[17] and that UWF prefills with each listed pair ^[18], and the Directed Edges grid covers many pairs at once ^[6]. Cross-check one against the other for the borderline pairs.

What are the brand color accessibility guidelines for text and background pairings?

The normative guidance is WCAG 2.2: SC 1.4.3 for text, SC 1.4.11 for non-text, SC 1.4.1 for color alone. U.S. federal guidance at Section508.gov states that regular text must have a contrast ratio of 4.5:1 or higher ^[9], and Carbon states the same figure for standard text ^[32]. Institutions add rules about which pairs may be used for which roles, as UWF does.

Is there a copyable color palette contrast ratio chart?

Table 3 is a chart in that sense, and the Directed Edges grid generates one from a list of hex values. Replace the fictional values with your own and recompute every row; ratios do not transfer between palettes.

Can an original accent color be kept if it fails?

Yes, for roles where it carries no information, such as decoration or logos. WCAG gives no contrast requirement to text in a logo or brand name ^[1]. As colorcontrast.org notes, WCAG does not ban low-contrast colors but requires sufficient contrast when they carry information ^[11]. Add a tested variant for text and controls.

Conclusion

A palette becomes usable when each color pair has a job, a background, a size, a state and an owner. The calculation is short and public: relative luminance, the ratio formula and the published thresholds. The decision, however, is not in the arithmetic alone. A coral that fails at 2.62:1 on paper is still a good brand color for decoration, and a darker sibling at 5.56:1 gives the text role to someone who can approve it.

The matrix in Table 3 is therefore a permission document. It names what is allowed, what is restricted under exact conditions, and what is unsuitable, and it records the revision so that a change is visible. Free tools already test pairs, and this report does not claim to improve on them; it adds the handoff structure around their results: a role, a named background, a state, a revision and an owner for every pair that a designer is allowed to use. A pair that passes still leaves link identification, color-only meaning, gradients, transparency and whole-page conformance to be handled separately, and nothing here substitutes for a specialist evaluation of a complete site.