BALKE/ASSOCIATES← All tools

DESIGN TOOL / 008

Color & accessibility.

Measure WCAG contrast, test real typography, and find nearby accessible colors without sending anything outside your browser.

COLOR PAIR

STARTING PAIRS

TEXT SETTINGS

CONTRAST RATIO

17.62:1

AA PASS

LIVE TYPE PREVIEW

Clear engineering for complex systems.

Body text should remain readable across screens, lighting conditions, and visual abilities.

AA normal text

4.5:1 minimum
PASS

AAA normal text

7:1 minimum
PASS

AA large text

3:1 minimum
PASS

AAA large text

4.5:1 minimum
PASS

NEAREST FOREGROUND SUGGESTIONS

AA

#F8FAFC

AAA

#F8FAFC

CSS

.accessible-color {
  color: #F8FAFC;
  background-color: #071522;
}

ACCESSIBILITY NOTE

Contrast is one part of accessibility. Do not rely on color alone to communicate meaning, and test complete interfaces with keyboard navigation, zoom, screen readers, and real users. Results use WCAG 2 relative-luminance contrast thresholds.