Accessible Brand Color System, Measured

The tokens

One gold, seven roles

Each role names the job the gold does and the site token it comes from, in each theme. Copy any value; the tint and the line are given as the color they paint.

Light theme

Gold --aa2-gold Rules, marks, chart series and fills. On the paper it decorates; it never carries words.
Gold ink --aa2-gold-ink Words, links and the focus ring.
Strong gold ink --aa2-gold-ink-strong Words on a gold tint; the primary button on hover.
Pale gold --aa2-gold-pale A highlight fill, with ink on it.
Gold tint --aa2-gold-wash · 12% Behind accented text and selected rows: the gold at 12% over the page.
Gold line --aa2-gold-line · 28% Hairlines around gold tints: the gold at 28% over the page. Decoration only.
Gold on a dark block --aa2-block-accent The accent inside the deliberately dark blocks.

Dark theme

Gold --aa2-gold Rules, marks, chart series and fills. On the dark page it also reads.
Gold ink --aa2-gold-ink Words, links and the focus ring.
Strong gold ink --aa2-gold-ink-strong Words on a gold tint; the primary button on hover.
Pale gold --aa2-gold-pale A highlight fill, with dark ink on it.
Gold tint --aa2-gold-wash · 14% Behind accented text and selected rows: the gold at 14% over the page.
Gold line --aa2-gold-line · 30% Hairlines around gold tints: the gold at 30% over the page. Decoration only.
Gold on a dark block --aa2-block-accent The accent inside the raised dark blocks.

The gold, the pale gold and the dark-block accent are the same in both themes; the inks, the tint and the line change with the page. These are the defaults: choosing another accent color in this site's settings changes the site, not the values published here.

Measured

Every pair it relies on

Words need 4.5:1 for AA and 7:1 for AAA; a mark that must be seen needs 3:1. A decoration has no minimum, and white on the gold is shown because the system never uses it.

Pairs measured: 22
With a minimum: 16
Weakest pair in use: 5.17:1 Gold ink, well, light theme
Below their minimum: 0

Every pair the brand system relies on, in both themes, measured
Pair	Sample	Ratio	Needs	Verdict
Light theme
Goldon page	#D3AF37 / #F5F0E6	1.85:1	None	Decoration, no minimum
Goldon raised	#D3AF37 / #FCF9F2	2.00:1	None	Decoration, no minimum
Gold inkon page	#765A0B / #F5F0E6	5.71:1	4.5:1, 7:1 for AAA	Passes AA
Gold inkon raised	#765A0B / #FCF9F2	6.16:1	4.5:1, 7:1 for AAA	Passes AA
Gold inkon well	#765A0B / #ECE5D7	5.17:1	4.5:1, 7:1 for AAA	Passes AA
Strong gold inkon gold tint	#5E4708 / #F1E8D1	7.22:1	4.5:1, 7:1 for AAA	Passes AAA
Ink on goldon gold	#1C1A16 / #D3AF37	8.23:1	4.5:1, 7:1 for AAA	Passes AAA
Whiteon gold	#FFFFFF / #D3AF37	2.10:1	Never used	Never used: fails
Ink on goldon pale gold	#1C1A16 / #F2E2AE	13.45:1	4.5:1, 7:1 for AAA	Passes AAA
Gold on a dark blockon dark block	#D3AF37 / #1D2A3E	6.85:1	4.5:1, 7:1 for AAA	Passes AA
Gold lineon page	#EBDEB5 / #F5F0E6	1.18:1	None	Decoration, no minimum
Dark theme
Goldon page	#D3AF37 / #0F0E0C	9.14:1	3:1	Passes 3:1
Goldon raised	#D3AF37 / #171613	8.57:1	3:1	Passes 3:1
Gold inkon page	#E2C766 / #0F0E0C	11.57:1	4.5:1, 7:1 for AAA	Passes AAA
Gold inkon raised	#E2C766 / #171613	10.85:1	4.5:1, 7:1 for AAA	Passes AAA
Gold inkon well	#E2C766 / #1C1A17	10.41:1	4.5:1, 7:1 for AAA	Passes AAA
Strong gold inkon gold tint	#F0DC9A / #2A2512	11.23:1	4.5:1, 7:1 for AAA	Passes AAA
Ink on goldon gold	#0F0E0C / #D3AF37	9.14:1	4.5:1, 7:1 for AAA	Passes AAA
Whiteon gold	#FFFFFF / #D3AF37	2.10:1	Never used	Never used: fails
Ink on goldon pale gold	#0F0E0C / #F2E2AE	14.94:1	4.5:1, 7:1 for AAA	Passes AAA
Gold on a dark blockon dark block	#D3AF37 / #171613	8.57:1	4.5:1, 7:1 for AAA	Passes AAA
Gold lineon page	#4A3E19 / #0F0E0C	1.83:1	None	Decoration, no minimum

The hue

The full ramp

The gold's hue from 50 to 950, each step measured on both pages, with what it can carry there.

The brand hue from 50 to 950, measured on both pages
Step	OKLCH lightness	On the light paper	On the dark page
50	0.97	1.04:1 Fills and marks	17.72:1 Text
100	0.94	1.04:1 Fills and marks	16.19:1 Text
200	0.88	1.26:1 Fills and marks	13.46:1 Text
300The brand color	0.77	1.85:1 Fills and marks	9.14:1 Text
400	0.71	2.26:1 Fills and marks	7.49:1 Text
500	0.62	3.22:1 Large text and icons	5.26:1 Text
600	0.54	4.49:1 Large text and icons	3.78:1 Large text and icons
700	0.46	6.32:1 Text	2.68:1 Fills and marks
800	0.37	9.18:1 Text	1.84:1 Fills and marks
900	0.28	12.92:1 Text	1.31:1 Fills and marks
950	0.20	15.94:1 Text	1.06:1 Fills and marks

"Text" means 4.5:1 or more on that page, "Large text and icons" 3:1, and "Fills and marks" less. The ramp is the color engine's 11-step scale at the gold's hue, with chroma eased toward the ends so every step stays in sRGB.

Your color

Try it with your brand color

The same questions, asked of any color: can it carry words on each page, and if not, which color at its hue can.

Your brand color

A hex color, like #D3AF37 or #36F.

Shown for the site's gold. Changing the color needs JavaScript.

Words on your color as a fill

#000000 9.95:1

Light theme

Your color on the page: #D3AF37 1.85:1 Fills and marks
Ink for words, 4.5:1: #856A00 4.55:1
Stronger ink, 7:1: #624D00 7.16:1
Its tint, 12% over the page: #F1E8D1

Dark theme

Your color on the page: #D3AF37 9.14:1 Text
Ink for words, 4.5:1: #D3AF37 9.14:1 Your color itself
Stronger ink, 7:1: #D3AF37 9.14:1 Your color itself
Its tint, 14% over the page: #2A2512

50 100 200 300 400 500 600 700 800 900 950

The inks are found the way the color tools find the nearest passing color: keep the hue and chroma, and walk OKLCH lightness away from the page until the ratio is met. For the site's gold that gives #856A00 at 4.55:1; the site's own gold ink, #765A0B, goes further, to 5.71:1, so small text keeps a margin.

How it holds

The rules behind the gold

Four rules let a gold that fails as text lead the whole design.

Draw with gold; write with gold ink. On the light paper the gold measures 1.85:1, so it draws rules, marks and chart series and never carries words. The gold ink, #765A0B, reads at 5.71:1; on the dark page the gold itself reaches 9.14:1 and the ink flips to the light end of the family, #E2C766, at 11.57:1.
Words on a gold fill are ink, never white. Dark ink on the gold measures 8.23:1 in the light theme and 9.14:1 in the dark; white on the same gold is 2.10:1.
A tint carries the strong ink; its line only decorates. The tint is the gold at 12% over the paper and 14% over the dark page; the strong ink on it measures 7.22:1 and 11.23:1. The line around it, at 28%, is 1.18:1 on the paper, so it is never the only edge of a control.
A ramp gives steps, not guarantees. Step 600, #866B00, measures 4.49:1 on the paper, just under 4.5:1; step 700 clears it. The site's gold ink sits between the two, tuned by hand to keep a margin.

Code

Export the system

Seven roles in each theme, and the ramp.

The CSS uses one set of names and swaps the values for a dark scheme; Tailwind and DTCG name both themes.

CSS custom properties, light and dark

/* Generated by Auric Artisan brand system on 2026-10-11 */
/* Light values by default; dark ones when the reader prefers a dark scheme. */
:root {
  --brand-fill: #D3AF37; /* Gold (--aa2-gold) */
  --brand-ink: #765A0B; /* Gold ink (--aa2-gold-ink) */
  --brand-ink-strong: #5E4708; /* Strong gold ink (--aa2-gold-ink-strong) */
  --brand-pale: #F2E2AE; /* Pale gold (--aa2-gold-pale) */
  --brand-wash: #F1E8D1; /* Gold tint (--aa2-gold-wash at 12% over the page) */
  --brand-line: #EBDEB5; /* Gold line (--aa2-gold-line at 28% over the page) */
  --brand-block-accent: #D3AF37; /* Gold on a dark block (--aa2-block-accent) */
  --brand-50: #FFF5D7;
  --brand-100: #FFEAAD;
  --brand-200: #F5D574;
  --brand-300: #D3AF37; /* Auric gold itself */
  --brand-400: #C09E23;
  --brand-500: #A28200;
  --brand-600: #866B00;
  --brand-700: #6B5500;
  --brand-800: #4E3E00;
  --brand-900: #332700;
  --brand-950: #1D1500;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-fill: #D3AF37; /* Gold (--aa2-gold) */
    --brand-ink: #E2C766; /* Gold ink (--aa2-gold-ink) */
    --brand-ink-strong: #F0DC9A; /* Strong gold ink (--aa2-gold-ink-strong) */
    --brand-pale: #F2E2AE; /* Pale gold (--aa2-gold-pale) */
    --brand-wash: #2A2512; /* Gold tint (--aa2-gold-wash at 14% over the page) */
    --brand-line: #4A3E19; /* Gold line (--aa2-gold-line at 30% over the page) */
    --brand-block-accent: #D3AF37; /* Gold on a dark block (--aa2-block-accent) */
  }
}

Tailwind config

// Generated by Auric Artisan brand system on 2026-10-11
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "brand": {
          "light": {
            "fill": "#D3AF37",
            "ink": {
              "strong": "#5E4708"
            },
            "pale": "#F2E2AE",
            "wash": "#F1E8D1",
            "line": "#EBDEB5",
            "block": {
              "accent": "#D3AF37"
            }
          },
          "dark": {
            "fill": "#D3AF37",
            "ink": {
              "strong": "#F0DC9A"
            },
            "pale": "#F2E2AE",
            "wash": "#2A2512",
            "line": "#4A3E19",
            "block": {
              "accent": "#D3AF37"
            }
          },
          "ramp": {
            "50": "#FFF5D7",
            "100": "#FFEAAD",
            "200": "#F5D574",
            "300": "#D3AF37",
            "400": "#C09E23",
            "500": "#A28200",
            "600": "#866B00",
            "700": "#6B5500",
            "800": "#4E3E00",
            "900": "#332700",
            "950": "#1D1500"
          }
        }
      }
    },
  },
};

Design tokens (W3C DTCG)

{
  "$schema": "https://schemas.tokens.studio/latest/tokens-schema.json",
  "$description": "Generated by Auric Artisan brand system on 2026-10-11",
  "brand": {
    "light": {
      "fill": {
        "$value": "#D3AF37",
        "$type": "color",
        "$description": "Gold (--aa2-gold)"
      },
      "ink": {
        "$value": "#765A0B",
        "$type": "color",
        "$description": "Gold ink (--aa2-gold-ink)",
        "strong": {
          "$value": "#5E4708",
          "$type": "color",
          "$description": "Strong gold ink (--aa2-gold-ink-strong)"
        }
      },
      "pale": {
        "$value": "#F2E2AE",
        "$type": "color",
        "$description": "Pale gold (--aa2-gold-pale)"
      },
      "wash": {
        "$value": "#F1E8D1",
        "$type": "color",
        "$description": "Gold tint (--aa2-gold-wash at 12% over the page)"
      },
      "line": {
        "$value": "#EBDEB5",
        "$type": "color",
        "$description": "Gold line (--aa2-gold-line at 28% over the page)"
      },
      "block": {
        "accent": {
          "$value": "#D3AF37",
          "$type": "color",
          "$description": "Gold on a dark block (--aa2-block-accent)"
        }
      }
    },
    "dark": {
      "fill": {
        "$value": "#D3AF37",
        "$type": "color",
        "$description": "Gold (--aa2-gold)"
      },
      "ink": {
        "$value": "#E2C766",
        "$type": "color",
        "$description": "Gold ink (--aa2-gold-ink)",
        "strong": {
          "$value": "#F0DC9A",
          "$type": "color",
          "$description": "Strong gold ink (--aa2-gold-ink-strong)"
        }
      },
      "pale": {
        "$value": "#F2E2AE",
        "$type": "color",
        "$description": "Pale gold (--aa2-gold-pale)"
      },
      "wash": {
        "$value": "#2A2512",
        "$type": "color",
        "$description": "Gold tint (--aa2-gold-wash at 14% over the page)"
      },
      "line": {
        "$value": "#4A3E19",
        "$type": "color",
        "$description": "Gold line (--aa2-gold-line at 30% over the page)"
      },
      "block": {
        "accent": {
          "$value": "#D3AF37",
          "$type": "color",
          "$description": "Gold on a dark block (--aa2-block-accent)"
        }
      }
    },
    "ramp": {
      "50": {
        "$value": "#FFF5D7",
        "$type": "color",
        "$description": "Ramp step 50"
      },
      "100": {
        "$value": "#FFEAAD",
        "$type": "color",
        "$description": "Ramp step 100"
      },
      "200": {
        "$value": "#F5D574",
        "$type": "color",
        "$description": "Ramp step 200"
      },
      "300": {
        "$value": "#D3AF37",
        "$type": "color",
        "$description": "Auric gold itself"
      },
      "400": {
        "$value": "#C09E23",
        "$type": "color",
        "$description": "Ramp step 400"
      },
      "500": {
        "$value": "#A28200",
        "$type": "color",
        "$description": "Ramp step 500"
      },
      "600": {
        "$value": "#866B00",
        "$type": "color",
        "$description": "Ramp step 600"
      },
      "700": {
        "$value": "#6B5500",
        "$type": "color",
        "$description": "Ramp step 700"
      },
      "800": {
        "$value": "#4E3E00",
        "$type": "color",
        "$description": "Ramp step 800"
      },
      "900": {
        "$value": "#332700",
        "$type": "color",
        "$description": "Ramp step 900"
      },
      "950": {
        "$value": "#1D1500",
        "$type": "color",
        "$description": "Ramp step 950"
      }
    }
  }
}

Plain text to paste; nothing is downloaded. Free to use in any project.

Sources

Sources and method

Where the values and the method come from.

W3C, Web Content Accessibility Guidelines (WCAG) 2.2: success criteria 1.4.1, 1.4.3, 1.4.6 and 1.4.11.w3.org
Björn Ottosson, A perceptual color space for image processing (Oklab), 2020.bottosson.github.io
Make your brand color accessible: the method on this page, step by step.auricartisan.com
The system's source: the gold family in both blocks of this site's design tokens, css/system/tokens.css.auricartisan.com

Ratios are the WCAG 2 contrast ratio, floored to two decimals, from this site's color engine; the tint and the line are the gold composited over each page as a browser paints it. A Node test reads the values from the stylesheet and recomputes every number on this page. Checked with axe and the keyboard in Chromium; not yet tested with a screen reader. Last reviewed on 11 October 2026.

Brand system Gold as fill, ink and tint

One gold, seven roles

Light theme

Dark theme

Every pair it relies on

The full ramp

Try it with your brand color

Light theme

Dark theme

The rules behind the gold

Export the system

CSS custom properties, light and dark

Tailwind config

Design tokens (W3C DTCG)

Sources and method

More to use with it