OKLCH Studio
Color contrast fixes for common color pairs
WCAG 2.2 and APCA contrast for Tailwind colors and CSS named colors on white, black and neutral backgrounds, each with an accessible fix.
On white (#FFFFFF)
- amber-400
- amber-500
- amber-600
- amber-700
- amber-800
- amber-900
- amber-950
- blue-300
- blue-400
- blue-500
- blue-600
- blue-700
- blue-800
- blue-900
- blue-950
- cyan-400
- cyan-500
- cyan-600
- cyan-700
- cyan-800
- cyan-900
- cyan-950
- emerald-300
- emerald-400
- emerald-500
- emerald-600
- emerald-700
- emerald-800
- emerald-900
- emerald-950
- fuchsia-300
- fuchsia-400
- fuchsia-500
- fuchsia-600
- fuchsia-700
- fuchsia-800
- fuchsia-900
- fuchsia-950
- gray-400
- gray-500
- gray-600
- gray-700
- gray-800
- gray-900
- gray-950
- green-400
- green-500
- green-600
- green-700
- green-800
- green-900
- green-950
- indigo-300
- indigo-400
- indigo-500
- indigo-600
- indigo-700
- indigo-800
- indigo-900
- indigo-950
- lime-400
- lime-500
- lime-600
- lime-700
- lime-800
- lime-900
- lime-950
- mauve-300
- mauve-400
- mauve-500
- mauve-600
- mauve-700
- mauve-800
- mauve-900
- mauve-950
- mist-400
- mist-500
- mist-600
- mist-700
- mist-800
- mist-900
- mist-950
- neutral-400
- neutral-500
- neutral-600
- neutral-700
- neutral-800
- neutral-900
- neutral-950
- olive-400
- olive-500
- olive-600
- olive-700
- olive-800
- olive-900
- olive-950
- orange-300
- orange-400
- orange-500
- orange-600
- orange-700
- orange-800
- orange-900
- orange-950
- pink-300
- pink-400
- pink-500
- pink-600
- pink-700
- pink-800
- pink-900
- pink-950
- purple-300
- purple-400
- purple-500
- purple-600
- purple-700
- purple-800
- purple-900
- purple-950
- red-300
- red-400
- red-500
- red-600
- red-700
- red-800
- red-900
- red-950
- rose-300
- rose-400
- rose-500
- rose-600
- rose-700
- rose-800
- rose-900
- rose-950
- sky-300
- sky-400
- sky-500
- sky-600
- sky-700
- sky-800
- sky-900
- sky-950
- slate-400
- slate-500
- slate-600
- slate-700
- slate-800
- slate-900
- slate-950
- stone-400
- stone-500
- stone-600
- stone-700
- stone-800
- stone-900
- stone-950
- taupe-400
- taupe-500
- taupe-600
- taupe-700
- taupe-800
- taupe-900
- teal-400
- teal-500
- teal-600
- teal-700
- teal-800
- teal-900
- teal-950
- violet-300
- violet-400
- violet-500
- violet-600
- violet-700
- violet-800
- violet-900
- violet-950
- yellow-400
- yellow-500
- yellow-600
- yellow-700
- yellow-800
- yellow-900
- yellow-950
- zinc-400
- zinc-500
- zinc-600
- zinc-700
- zinc-800
- zinc-900
- zinc-950
- black
- blue
- blueviolet
- brown
- burlywood
- cadetblue
- chocolate
- coral
- cornflowerblue
- crimson
- darkblue
- darkcyan
- darkgoldenrod
- darkgray
- darkgreen
- darkkhaki
- darkmagenta
- darkolivegreen
- darkorange
- darkorchid
- darkred
- darksalmon
- darkseagreen
- darkslateblue
- darkslategray
- darkturquoise
- darkviolet
- deeppink
- deepskyblue
- dimgray
- dodgerblue
- firebrick
- forestgreen
- fuchsia
- goldenrod
- gray
- green
- hotpink
- indianred
- indigo
- lightblue
- lightcoral
- lightpink
- lightsalmon
- lightseagreen
- lightskyblue
- lightslategray
- lightsteelblue
- limegreen
- maroon
- mediumaquamarine
- mediumblue
- mediumorchid
- mediumpurple
- mediumseagreen
- mediumslateblue
- mediumturquoise
- mediumvioletred
- midnightblue
- navy
- olive
- olivedrab
- orange
- orangered
- orchid
- palevioletred
- peru
- pink
- plum
- purple
- rebeccapurple
- red
- rosybrown
- royalblue
- saddlebrown
- salmon
- sandybrown
- seagreen
- sienna
- silver
- skyblue
- slateblue
- slategray
- steelblue
- tan
- teal
- thistle
- tomato
- turquoise
- violet
- yellowgreen
On black (#000000)
- amber-50
- amber-100
- amber-200
- amber-300
- amber-400
- amber-500
- amber-600
- amber-700
- amber-800
- amber-900
- blue-50
- blue-100
- blue-200
- blue-300
- blue-400
- blue-500
- blue-600
- blue-700
- blue-800
- blue-900
- cyan-50
- cyan-100
- cyan-200
- cyan-300
- cyan-400
- cyan-500
- cyan-600
- cyan-700
- cyan-800
- cyan-900
- cyan-950
- emerald-50
- emerald-100
- emerald-200
- emerald-300
- emerald-400
- emerald-500
- emerald-600
- emerald-700
- emerald-800
- emerald-900
- fuchsia-50
- fuchsia-100
- fuchsia-200
- fuchsia-300
- fuchsia-400
- fuchsia-500
- fuchsia-600
- fuchsia-700
- fuchsia-800
- fuchsia-900
- gray-50
- gray-100
- gray-200
- gray-300
- gray-400
- gray-500
- gray-600
- gray-700
- green-50
- green-100
- green-200
- green-300
- green-400
- green-500
- green-600
- green-700
- green-800
- green-900
- indigo-50
- indigo-100
- indigo-200
- indigo-300
- indigo-400
- indigo-500
- indigo-600
- indigo-700
- indigo-800
- indigo-900
- lime-50
- lime-100
- lime-200
- lime-300
- lime-400
- lime-500
- lime-600
- lime-700
- lime-800
- lime-900
- mauve-50
- mauve-100
- mauve-200
- mauve-300
- mauve-400
- mauve-500
- mauve-600
- mauve-700
- mist-50
- mist-100
- mist-200
- mist-300
- mist-400
- mist-500
- mist-600
- mist-700
- neutral-100
- neutral-200
- neutral-300
- neutral-400
- neutral-500
- neutral-600
- neutral-700
- olive-50
- olive-100
- olive-200
- olive-300
- olive-400
- olive-500
- olive-600
- olive-700
- orange-50
- orange-100
- orange-200
- orange-300
- orange-400
- orange-500
- orange-600
- orange-700
- orange-800
- orange-900
- pink-50
- pink-100
- pink-200
- pink-300
- pink-400
- pink-500
- pink-600
- pink-700
- pink-800
- pink-900
- purple-50
- purple-100
- purple-200
- purple-300
- purple-400
- purple-500
- purple-600
- purple-700
- purple-800
- purple-900
- red-50
- red-100
- red-200
- red-300
- red-400
- red-500
- red-600
- red-700
- red-800
- red-900
- rose-50
- rose-100
- rose-200
- rose-300
- rose-400
- rose-500
- rose-600
- rose-700
- rose-800
- rose-900
- sky-50
- sky-100
- sky-200
- sky-300
- sky-400
- sky-500
- sky-600
- sky-700
- sky-800
- sky-900
- sky-950
- slate-50
- slate-100
- slate-200
- slate-300
- slate-400
- slate-500
- slate-600
- slate-700
- stone-50
- stone-100
- stone-200
- stone-300
- stone-400
- stone-500
- stone-600
- stone-700
- taupe-50
- taupe-100
- taupe-200
- taupe-300
- taupe-400
- taupe-500
- taupe-600
- taupe-700
- teal-50
- teal-100
- teal-200
- teal-300
- teal-400
- teal-500
- teal-600
- teal-700
- teal-800
- teal-900
- violet-50
- violet-100
- violet-200
- violet-300
- violet-400
- violet-500
- violet-600
- violet-700
- violet-800
- violet-900
- yellow-50
- yellow-100
- yellow-200
- yellow-300
- yellow-400
- yellow-500
- yellow-600
- yellow-700
- yellow-800
- yellow-900
- zinc-100
- zinc-200
- zinc-300
- zinc-400
- zinc-500
- zinc-600
- zinc-700
- aliceblue
- antiquewhite
- aqua
- aquamarine
- azure
- beige
- bisque
- blanchedalmond
- blue
- blueviolet
- brown
- burlywood
- cadetblue
- chartreuse
- chocolate
- coral
- cornflowerblue
- cornsilk
- crimson
- darkcyan
- darkgoldenrod
- darkgray
- darkgreen
- darkkhaki
- darkmagenta
- darkolivegreen
- darkorange
- darkorchid
- darkred
- darksalmon
- darkseagreen
- darkslateblue
- darkslategray
- darkturquoise
- darkviolet
- deeppink
- deepskyblue
- dimgray
- dodgerblue
- firebrick
- floralwhite
- forestgreen
- fuchsia
- gainsboro
- ghostwhite
- gold
- goldenrod
- gray
- green
- greenyellow
- honeydew
- hotpink
- indianred
- indigo
- ivory
- khaki
- lavender
- lavenderblush
- lawngreen
- lemonchiffon
- lightblue
- lightcoral
- lightcyan
- lightgoldenrodyellow
- lightgray
- lightgreen
- lightpink
- lightsalmon
- lightseagreen
- lightskyblue
- lightslategray
- lightsteelblue
- lightyellow
- lime
- limegreen
- linen
- maroon
- mediumaquamarine
- mediumblue
- mediumorchid
- mediumpurple
- mediumseagreen
- mediumslateblue
- mediumspringgreen
- mediumturquoise
- mediumvioletred
- mintcream
- mistyrose
- moccasin
- navajowhite
- oldlace
- olive
- olivedrab
- orange
- orangered
- orchid
- palegoldenrod
- palegreen
- paleturquoise
- palevioletred
- papayawhip
- peachpuff
- peru
- pink
- plum
- powderblue
- purple
- rebeccapurple
- red
- rosybrown
- royalblue
- saddlebrown
- salmon
- sandybrown
- seagreen
- seashell
- sienna
- silver
- skyblue
- slateblue
- slategray
- snow
- springgreen
- steelblue
- tan
- teal
- thistle
- tomato
- turquoise
- violet
- wheat
- white
- yellow
- yellowgreen
On gray-50 (#F9FAFB)
On gray-100 (#F3F4F6)
On gray-200 (#E5E7EB)
On gray-800 (#1E2939)
On gray-900 (#101828)
On gray-950 (#030712)
On #f5f5f5 (#F5F5F5)
On #eeeeee (#EEEEEE)
On #333333 (#333333)
On #222222 (#222222)
On #121212 (#121212)
On Tailwind CSS colors / CSS named colors
- white on amber-400
- white on amber-500
- white on amber-600
- black on amber-600
- white on amber-700
- black on amber-700
- black on amber-800
- black on amber-900
- white on blue-300
- white on blue-400
- white on blue-500
- black on blue-500
- white on blue-600
- black on blue-600
- white on blue-700
- black on blue-700
- black on blue-800
- black on blue-900
- white on cyan-400
- white on cyan-500
- white on cyan-600
- black on cyan-600
- white on cyan-700
- black on cyan-700
- black on cyan-800
- black on cyan-900
- black on cyan-950
- white on emerald-300
- white on emerald-400
- white on emerald-500
- white on emerald-600
- black on emerald-600
- white on emerald-700
- black on emerald-700
- black on emerald-800
- black on emerald-900
- white on fuchsia-300
- white on fuchsia-400
- white on fuchsia-500
- black on fuchsia-500
- white on fuchsia-600
- black on fuchsia-600
- white on fuchsia-700
- black on fuchsia-700
- black on fuchsia-800
- black on fuchsia-900
- white on gray-400
- white on gray-500
- black on gray-500
- black on gray-600
- black on gray-700
- white on green-400
- white on green-500
- white on green-600
- black on green-600
- white on green-700
- black on green-700
- black on green-800
- black on green-900
- white on indigo-300
- white on indigo-400
- black on indigo-400
- white on indigo-500
- black on indigo-500
- white on indigo-600
- black on indigo-600
- black on indigo-700
- black on indigo-800
- black on indigo-900
- white on lime-400
- white on lime-500
- white on lime-600
- black on lime-600
- white on lime-700
- black on lime-700
- black on lime-800
- black on lime-900
- white on mauve-300
- white on mauve-400
- white on mauve-500
- black on mauve-500
- black on mauve-600
- black on mauve-700
- white on mist-400
- white on mist-500
- black on mist-500
- black on mist-600
- black on mist-700
- white on neutral-400
- white on neutral-500
- black on neutral-500
- black on neutral-600
- black on neutral-700
- white on olive-400
- white on olive-500
- black on olive-500
- white on olive-600
- black on olive-600
- black on olive-700
- white on orange-300
- white on orange-400
- white on orange-500
- white on orange-600
- black on orange-600
- white on orange-700
- black on orange-700
- black on orange-800
- black on orange-900
- white on pink-300
- white on pink-400
- white on pink-500
- black on pink-500
- white on pink-600
- black on pink-600
- white on pink-700
- black on pink-700
- black on pink-800
- black on pink-900
- white on purple-300
- white on purple-400
- white on purple-500
- black on purple-500
- white on purple-600
- black on purple-600
- black on purple-700
- black on purple-800
- black on purple-900
- white on red-300
- white on red-400
- white on red-500
- black on red-500
- white on red-600
- black on red-600
- white on red-700
- black on red-700
- black on red-800
- black on red-900
- white on rose-300
- white on rose-400
- white on rose-500
- black on rose-500
- white on rose-600
- black on rose-600
- white on rose-700
- black on rose-700
- black on rose-800
- black on rose-900
- white on sky-300
- white on sky-400
- white on sky-500
- white on sky-600
- black on sky-600
- white on sky-700
- black on sky-700
- black on sky-800
- black on sky-900
- black on sky-950
- white on slate-400
- white on slate-500
- black on slate-500
- black on slate-600
- black on slate-700
- white on stone-400
- white on stone-500
- black on stone-500
- black on stone-600
- black on stone-700
- white on taupe-400
- white on taupe-500
- black on taupe-500
- black on taupe-600
- black on taupe-700
- white on teal-400
- white on teal-500
- white on teal-600
- black on teal-600
- white on teal-700
- black on teal-700
- black on teal-800
- black on teal-900
- white on violet-300
- white on violet-400
- white on violet-500
- black on violet-500
- white on violet-600
- black on violet-600
- black on violet-700
- black on violet-800
- black on violet-900
- white on yellow-400
- white on yellow-500
- white on yellow-600
- white on yellow-700
- black on yellow-700
- white on yellow-800
- black on yellow-800
- black on yellow-900
- white on zinc-400
- white on zinc-500
- black on zinc-500
- black on zinc-600
- black on zinc-700
- black on blue
- white on blueviolet
- black on blueviolet
- black on brown
- white on burlywood
- white on cadetblue
- black on cadetblue
- white on chocolate
- black on chocolate
- white on coral
- white on cornflowerblue
- white on crimson
- black on crimson
- white on darkcyan
- black on darkcyan
- white on darkgoldenrod
- black on darkgoldenrod
- white on darkgray
- black on darkgreen
- white on darkkhaki
- black on darkmagenta
- white on darkolivegreen
- black on darkolivegreen
- white on darkorange
- white on darkorchid
- black on darkorchid
- black on darkred
- white on darksalmon
- white on darkseagreen
- black on darkslateblue
- black on darkslategray
- white on darkturquoise
- white on darkviolet
- black on darkviolet
- white on deeppink
- black on deeppink
- white on deepskyblue
- white on dimgray
- black on dimgray
- white on dodgerblue
- black on dodgerblue
- white on firebrick
- black on firebrick
- white on forestgreen
- black on forestgreen
- white on fuchsia
- black on fuchsia
- white on goldenrod
- white on gray
- black on gray
- white on green
- black on green
- white on hotpink
- white on indianred
- black on indianred
- black on indigo
- white on lightblue
- white on lightcoral
- white on lightpink
- white on lightsalmon
- white on lightseagreen
- white on lightskyblue
- white on lightslategray
- black on lightslategray
- white on lightsteelblue
- white on limegreen
- black on maroon
- white on mediumaquamarine
- black on mediumblue
- white on mediumorchid
- black on mediumorchid
- white on mediumpurple
- black on mediumpurple
- white on mediumseagreen
- white on mediumslateblue
- black on mediumslateblue
- white on mediumturquoise
- white on mediumvioletred
- black on mediumvioletred
- white on olive
- black on olive
- white on olivedrab
- black on olivedrab
- white on orange
- white on orangered
- black on orangered
- white on orchid
- white on palevioletred
- black on palevioletred
- white on peru
- white on pink
- white on plum
- black on purple
- black on rebeccapurple
- white on red
- black on red
- white on rosybrown
- white on royalblue
- black on royalblue
- black on saddlebrown
- white on salmon
- white on sandybrown
- white on seagreen
- black on seagreen
- white on sienna
- black on sienna
- white on silver
- white on skyblue
- white on slateblue
- black on slateblue
- white on slategray
- black on slategray
- white on steelblue
- black on steelblue
- white on tan
- white on teal
- black on teal
- white on thistle
- white on tomato
- white on turquoise
- white on violet
- white on yellowgreen