rndrfero's Readable Palette Checker

A typography color testing tool that validates text-background combinations in your palette for optimal readability.

Test your custom color schemes to ensure text is clear and easy to read for everyone.

Luminance contrast

Luminance delta threshold: 0.3

Combinations: 21

White on DarkSlateGray

DarkTurquoise on DarkSlateGray

Orange on DarkSlateGray

LightSalmon on DarkSlateGray

DarkSlateGray on DarkTurquoise

White on DarkTurquoise

White on Teal

Orange on Teal

LightSalmon on Teal

White on DarkOliveGreen

DarkSlateGray on Orange

White on Orange

Teal on Orange

White on OrangeRed

White on Crimson

LightSalmon on Crimson

DarkSlateGray on LightSalmon

White on LightSalmon

Teal on LightSalmon

Crimson on LightSalmon

White on Coral

Javascript code

const palette = [
  // DarkSlateGray on White
  { backgroundColor: '#333333', color: '#FFFFFF' },
  // DarkSlateGray on DarkTurquoise
  { backgroundColor: '#333333', color: '#00ADD8' },
  // DarkSlateGray on Orange
  { backgroundColor: '#333333', color: '#F7A501' },
  // DarkSlateGray on LightSalmon
  { backgroundColor: '#333333', color: '#FF9F93' },
  // DarkTurquoise on DarkSlateGray
  { backgroundColor: '#00ADD8', color: '#333333' },
  // DarkTurquoise on White
  { backgroundColor: '#00ADD8', color: '#FFFFFF' },
  // Teal on White
  { backgroundColor: '#06587E', color: '#FFFFFF' },
  // Teal on Orange
  { backgroundColor: '#06587E', color: '#F7A501' },
  // Teal on LightSalmon
  { backgroundColor: '#06587E', color: '#FF9F93' },
  // DarkOliveGreen on White
  { backgroundColor: '#488D34', color: '#FFFFFF' },
  // Orange on DarkSlateGray
  { backgroundColor: '#F7A501', color: '#333333' },
  // Orange on White
  { backgroundColor: '#F7A501', color: '#FFFFFF' },
  // Orange on Teal
  { backgroundColor: '#F7A501', color: '#06587E' },
  // OrangeRed on White
  { backgroundColor: '#ED5C03', color: '#FFFFFF' },
  // Crimson on White
  { backgroundColor: '#DE2A1B', color: '#FFFFFF' },
  // Crimson on LightSalmon
  { backgroundColor: '#DE2A1B', color: '#FF9F93' },
  // LightSalmon on DarkSlateGray
  { backgroundColor: '#FF9F93', color: '#333333' },
  // LightSalmon on White
  { backgroundColor: '#FF9F93', color: '#FFFFFF' },
  // LightSalmon on Teal
  { backgroundColor: '#FF9F93', color: '#06587E' },
  // LightSalmon on Crimson
  { backgroundColor: '#FF9F93', color: '#DE2A1B' },
  // Coral on White
  { backgroundColor: '#F96D5C', color: '#FFFFFF' },
];