Bright labels and decorative accents

Coral, teal and yellow are accent candidates. Use the measured dark label on each; do not treat the swatches as interchangeable text colors.

Colors and palette cases

Editorial example reviewed September 13, 2026. Numeric results below are calculated from these values.

Nearest reference name

Salmon

RGB 255, 107, 107

Explore color

Nearest reference name

CSS Turquoise

RGB 78, 205, 196

Explore color

Nearest reference name

Tan

RGB 255, 230, 109

Explore color

Nearest reference name

Seafoam

RGB 168, 230, 207

Explore color

Nearest reference name

Coral

RGB 255, 179, 71

Explore color

Assign roles and check the pair

The lightest and darkest supplied values are the starting reading pair. The accent label adds black or white, whichever has greater contrast. You can change the accent below.

Accent surface

A palette in context

Use this preview to inspect reading text and an accent label.

Example action

Reading text #FF6B6B on #FFE66D: 2.219:1 - Fail normal text AA.

Accent label #000000 on #FF6B6B: 7.567:1.

Checks use unrounded ratios and opaque sRGB. The example action is a visual sample. Test boundaries, focus and hover in your actual component.

Find a passing reading color

All color pairs: normal text AA

Rows are text; columns are backgrounds. Each cell gives the ratio and AA result.
Text / background	#FF6B6B	#4ECDC4	#FFE66D	#A8E6CF	#FFB347
#FF6B6B	1.00:1 Fail	1.43:1 Fail	2.22:1 Fail	1.97:1 Fail	1.56:1 Fail
#4ECDC4	1.43:1 Fail	1.00:1 Fail	1.55:1 Fail	1.37:1 Fail	1.09:1 Fail
#FFE66D	2.22:1 Fail	1.55:1 Fail	1.00:1 Fail	1.13:1 Fail	1.42:1 Fail
#A8E6CF	1.97:1 Fail	1.37:1 Fail	1.13:1 Fail	1.00:1 Fail	1.26:1 Fail
#FFB347	1.56:1 Fail	1.09:1 Fail	1.42:1 Fail	1.26:1 Fail	1.00:1 Fail

:root {
  --surface: #FFE66D;
  --text: #FF6B6B;
  --accent: #FF6B6B;
  --on-accent: #000000;
}

Edit and export in Studio

Keep the scope of each result clear

All comparisons use opaque sRGB and WCAG relative luminance. Normal-text AA requires 4.5:1; a displayed rounded ratio never overrides the unrounded pass or fail. A palette is not a complete accessibility audit.

W3C contrast requirements ? Methods and limitations ? Turn values into semantic tokens