OKLCH Studio
Kontrast-Fixes für gängige Farbpaare
WCAG-2.2- und APCA-Kontrast für Tailwind- und CSS-Farben auf Weiß, Schwarz und neutralen Hintergründen – jeweils mit barrierefreiem Fix.
Auf 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
Auf 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
Auf gray-50 (#F9FAFB)
Auf gray-100 (#F3F4F6)
Auf gray-200 (#E5E7EB)
Auf gray-800 (#1E2939)
Auf gray-900 (#101828)
Auf gray-950 (#030712)
Auf #f5f5f5 (#F5F5F5)
Auf #eeeeee (#EEEEEE)
Auf #333333 (#333333)
Auf #222222 (#222222)
Auf #121212 (#121212)
Auf Tailwind-CSS-Farben / Benannte CSS-Farben
- white auf amber-400
- white auf amber-500
- white auf amber-600
- black auf amber-600
- white auf amber-700
- black auf amber-700
- black auf amber-800
- black auf amber-900
- white auf blue-300
- white auf blue-400
- white auf blue-500
- black auf blue-500
- white auf blue-600
- black auf blue-600
- white auf blue-700
- black auf blue-700
- black auf blue-800
- black auf blue-900
- white auf cyan-400
- white auf cyan-500
- white auf cyan-600
- black auf cyan-600
- white auf cyan-700
- black auf cyan-700
- black auf cyan-800
- black auf cyan-900
- black auf cyan-950
- white auf emerald-300
- white auf emerald-400
- white auf emerald-500
- white auf emerald-600
- black auf emerald-600
- white auf emerald-700
- black auf emerald-700
- black auf emerald-800
- black auf emerald-900
- white auf fuchsia-300
- white auf fuchsia-400
- white auf fuchsia-500
- black auf fuchsia-500
- white auf fuchsia-600
- black auf fuchsia-600
- white auf fuchsia-700
- black auf fuchsia-700
- black auf fuchsia-800
- black auf fuchsia-900
- white auf gray-400
- white auf gray-500
- black auf gray-500
- black auf gray-600
- black auf gray-700
- white auf green-400
- white auf green-500
- white auf green-600
- black auf green-600
- white auf green-700
- black auf green-700
- black auf green-800
- black auf green-900
- white auf indigo-300
- white auf indigo-400
- black auf indigo-400
- white auf indigo-500
- black auf indigo-500
- white auf indigo-600
- black auf indigo-600
- black auf indigo-700
- black auf indigo-800
- black auf indigo-900
- white auf lime-400
- white auf lime-500
- white auf lime-600
- black auf lime-600
- white auf lime-700
- black auf lime-700
- black auf lime-800
- black auf lime-900
- white auf mauve-300
- white auf mauve-400
- white auf mauve-500
- black auf mauve-500
- black auf mauve-600
- black auf mauve-700
- white auf mist-400
- white auf mist-500
- black auf mist-500
- black auf mist-600
- black auf mist-700
- white auf neutral-400
- white auf neutral-500
- black auf neutral-500
- black auf neutral-600
- black auf neutral-700
- white auf olive-400
- white auf olive-500
- black auf olive-500
- white auf olive-600
- black auf olive-600
- black auf olive-700
- white auf orange-300
- white auf orange-400
- white auf orange-500
- white auf orange-600
- black auf orange-600
- white auf orange-700
- black auf orange-700
- black auf orange-800
- black auf orange-900
- white auf pink-300
- white auf pink-400
- white auf pink-500
- black auf pink-500
- white auf pink-600
- black auf pink-600
- white auf pink-700
- black auf pink-700
- black auf pink-800
- black auf pink-900
- white auf purple-300
- white auf purple-400
- white auf purple-500
- black auf purple-500
- white auf purple-600
- black auf purple-600
- black auf purple-700
- black auf purple-800
- black auf purple-900
- white auf red-300
- white auf red-400
- white auf red-500
- black auf red-500
- white auf red-600
- black auf red-600
- white auf red-700
- black auf red-700
- black auf red-800
- black auf red-900
- white auf rose-300
- white auf rose-400
- white auf rose-500
- black auf rose-500
- white auf rose-600
- black auf rose-600
- white auf rose-700
- black auf rose-700
- black auf rose-800
- black auf rose-900
- white auf sky-300
- white auf sky-400
- white auf sky-500
- white auf sky-600
- black auf sky-600
- white auf sky-700
- black auf sky-700
- black auf sky-800
- black auf sky-900
- black auf sky-950
- white auf slate-400
- white auf slate-500
- black auf slate-500
- black auf slate-600
- black auf slate-700
- white auf stone-400
- white auf stone-500
- black auf stone-500
- black auf stone-600
- black auf stone-700
- white auf taupe-400
- white auf taupe-500
- black auf taupe-500
- black auf taupe-600
- black auf taupe-700
- white auf teal-400
- white auf teal-500
- white auf teal-600
- black auf teal-600
- white auf teal-700
- black auf teal-700
- black auf teal-800
- black auf teal-900
- white auf violet-300
- white auf violet-400
- white auf violet-500
- black auf violet-500
- white auf violet-600
- black auf violet-600
- black auf violet-700
- black auf violet-800
- black auf violet-900
- white auf yellow-400
- white auf yellow-500
- white auf yellow-600
- white auf yellow-700
- black auf yellow-700
- white auf yellow-800
- black auf yellow-800
- black auf yellow-900
- white auf zinc-400
- white auf zinc-500
- black auf zinc-500
- black auf zinc-600
- black auf zinc-700
- black auf blue
- white auf blueviolet
- black auf blueviolet
- black auf brown
- white auf burlywood
- white auf cadetblue
- black auf cadetblue
- white auf chocolate
- black auf chocolate
- white auf coral
- white auf cornflowerblue
- white auf crimson
- black auf crimson
- white auf darkcyan
- black auf darkcyan
- white auf darkgoldenrod
- black auf darkgoldenrod
- white auf darkgray
- black auf darkgreen
- white auf darkkhaki
- black auf darkmagenta
- white auf darkolivegreen
- black auf darkolivegreen
- white auf darkorange
- white auf darkorchid
- black auf darkorchid
- black auf darkred
- white auf darksalmon
- white auf darkseagreen
- black auf darkslateblue
- black auf darkslategray
- white auf darkturquoise
- white auf darkviolet
- black auf darkviolet
- white auf deeppink
- black auf deeppink
- white auf deepskyblue
- white auf dimgray
- black auf dimgray
- white auf dodgerblue
- black auf dodgerblue
- white auf firebrick
- black auf firebrick
- white auf forestgreen
- black auf forestgreen
- white auf fuchsia
- black auf fuchsia
- white auf goldenrod
- white auf gray
- black auf gray
- white auf green
- black auf green
- white auf hotpink
- white auf indianred
- black auf indianred
- black auf indigo
- white auf lightblue
- white auf lightcoral
- white auf lightpink
- white auf lightsalmon
- white auf lightseagreen
- white auf lightskyblue
- white auf lightslategray
- black auf lightslategray
- white auf lightsteelblue
- white auf limegreen
- black auf maroon
- white auf mediumaquamarine
- black auf mediumblue
- white auf mediumorchid
- black auf mediumorchid
- white auf mediumpurple
- black auf mediumpurple
- white auf mediumseagreen
- white auf mediumslateblue
- black auf mediumslateblue
- white auf mediumturquoise
- white auf mediumvioletred
- black auf mediumvioletred
- white auf olive
- black auf olive
- white auf olivedrab
- black auf olivedrab
- white auf orange
- white auf orangered
- black auf orangered
- white auf orchid
- white auf palevioletred
- black auf palevioletred
- white auf peru
- white auf pink
- white auf plum
- black auf purple
- black auf rebeccapurple
- white auf red
- black auf red
- white auf rosybrown
- white auf royalblue
- black auf royalblue
- black auf saddlebrown
- white auf salmon
- white auf sandybrown
- white auf seagreen
- black auf seagreen
- white auf sienna
- black auf sienna
- white auf silver
- white auf skyblue
- white auf slateblue
- black auf slateblue
- white auf slategray
- black auf slategray
- white auf steelblue
- black auf steelblue
- white auf tan
- white auf teal
- black auf teal
- white auf thistle
- white auf tomato
- white auf turquoise
- white auf violet
- white auf yellowgreen