Skip to main content
minimal

Graphite and White

9.29:1 contrast ratio —

AAA

Visual Preview

#474747Graphite
#FFFFFFWhite

The quick brown fox

Body text — Graphite on White

Supporting text at reduced opacity

Badge

Reversed — White on Graphite

Inverted combination preview

Contrast Analysis

Contrast Ratio

9.29:1

AAA

WCAG AA

✓ Pass

Requires 4.5:1

WCAG AA Large

✓ Pass

Requires 3:1

WCAG AAA

✓ Pass

Requires 7:1

Color Values

Graphite

Foreground (Text)

HEX
#474747
RGB
rgb(71, 71, 71)
HSL
hsl(0, 0%, 28%)

White

Background

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)

Design Use Cases

  • Accessibility-critical text
  • Body copy
  • Public sector services
  • Medical content

Industry Recommendations

Accessibility-First Products
Publishing
Legal Services
Education
Government

Color Psychology

The Graphite tone evokes neutrality, balance, and professionalism, while White brings purity, clarity, and simplicity. Together, they create a balanced palette suited for compelling visual communication.

Palette Exports

:root {
  --color-graphite: #474747;
  --color-white: #FFFFFF;
}

.combo-graphite-white {
  color: var(--color-graphite);
  background-color: var(--color-white);
}

Quick Snippets

CSS Variables

:root {
  --color-graphite: #474747;
  --color-white: #FFFFFF;
}

Tailwind CSS

<div class="bg-white text-stone-700">
  Your content here
</div>

Individual Colors

Similar Combinations