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.
The Palette
Hex color code
DarkSlateGray
×
Text
Background
Hex color code
White
×
Text
Background
Hex color code
DarkTurquoise
×
Text
Background
Hex color code
Teal
×
Text
Background
Hex color code
DarkOliveGreen
×
Text
Background
Hex color code
Orange
×
Text
Background
Hex color code
OrangeRed
×
Text
Background
Hex color code
Crimson
×
Text
Background
Hex color code
LightSalmon
×
Text
Background
Hex color code
Coral
×
Text
Background
+
Luminance contrast
Luminance delta threshold:
0.30
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 = [ // White on DarkSlateGray { backgroundColor: '#333333', color: '#FFFFFF' }, // DarkTurquoise on DarkSlateGray { backgroundColor: '#333333', color: '#00ADD8' }, // Orange on DarkSlateGray { backgroundColor: '#333333', color: '#F7A501' }, // LightSalmon on DarkSlateGray { backgroundColor: '#333333', color: '#FF9F93' }, // DarkSlateGray on DarkTurquoise { backgroundColor: '#00ADD8', color: '#333333' }, // White on DarkTurquoise { backgroundColor: '#00ADD8', color: '#FFFFFF' }, // White on Teal { backgroundColor: '#06587E', color: '#FFFFFF' }, // Orange on Teal { backgroundColor: '#06587E', color: '#F7A501' }, // LightSalmon on Teal { backgroundColor: '#06587E', color: '#FF9F93' }, // White on DarkOliveGreen { backgroundColor: '#488D34', color: '#FFFFFF' }, // DarkSlateGray on Orange { backgroundColor: '#F7A501', color: '#333333' }, // White on Orange { backgroundColor: '#F7A501', color: '#FFFFFF' }, // Teal on Orange { backgroundColor: '#F7A501', color: '#06587E' }, // White on OrangeRed { backgroundColor: '#ED5C03', color: '#FFFFFF' }, // White on Crimson { backgroundColor: '#DE2A1B', color: '#FFFFFF' }, // LightSalmon on Crimson { backgroundColor: '#DE2A1B', color: '#FF9F93' }, // DarkSlateGray on LightSalmon { backgroundColor: '#FF9F93', color: '#333333' }, // White on LightSalmon { backgroundColor: '#FF9F93', color: '#FFFFFF' }, // Teal on LightSalmon { backgroundColor: '#FF9F93', color: '#06587E' }, // Crimson on LightSalmon { backgroundColor: '#FF9F93', color: '#DE2A1B' }, // White on Coral { backgroundColor: '#F96D5C', color: '#FFFFFF' }, ];