Farben in ChiroCloud – HEX-Codes und Farbnamen #

An verschiedenen Stellen in ChiroCloud können Farben individuell festgelegt werden. Je nach Eingabefeld kann dafür ein HEX-Farbcode und/oder ein CSS-Farbname verwendet werden.

HEX-Farben #

Ein HEX-Code beschreibt eine Farbe eindeutig und beginnt mit einem #, gefolgt von sechs Zeichen.

Beispiele:

• #FFFFFF = Weiß
• #000000 = Schwarz
• #FF0000 = Rot
• #008000 = Grün
• #0000FF = Blau
• #F5F5F5 = sehr helles Grau

Die sechs Zeichen stehen jeweils paarweise für den Rot-, Grün- und Blauanteil der Farbe: #RRGGBB
Dabei reichen die möglichen Werte von 00 bis FF. So lassen sich über 16 Millionen verschiedene Farben darstellen.

Tipp: Wenn ChiroCloud einen HEX-Code erwartet, sollte am besten immer die vollständige Schreibweise mit sechs Zeichen und führendem # verwendet werden.

Einen passenden Farbton auswählen und den zugehörigen HEX-Code anzeigen lassen kann man zum Beispiel mit dem
W3Schools HTML Color Picker.

Farbnamen #

In einigen Feldern akzeptiert ChiroCloud auch sogenannte CSS-Farbnamen. Statt eines HEX-Codes kann dort beispielsweise einfach

red
blue
white
black
orange
lightblue
darkgreen

eingetragen werden.
Dabei handelt es sich um fest definierte englische Farbnamen. Ein frei gewählter Begriff wie hellblau funktioniert daher nicht.
Eine Übersicht der verfügbaren Farbnamen gibt es bei Mozilla MDN – CSS Farbnamen.

Für eine exakt gewünschte Farbe empfehlen wir einen HEX-Code. Farbnamen sind vor allem praktisch für einfache Standardfarben.

Auf gute Lesbarkeit achten #

Bei Texten sollte nicht nur darauf geachtet werden, ob zwei Farben optisch gut zusammenpassen. Entscheidend ist auch, ob zwischen Schriftfarbe und Hintergrundfarbe genügend Kontrast besteht.

Beispielsweise ist hellgraue Schrift auf weißem Hintergrund auch bei ausreichend großer Schrift oft nur schwer zu lesen. Das betrifft besonders Menschen mit eingeschränktem Sehvermögen, kann aber beispielsweise auch auf kleinen Displays oder bei ungünstigen Lichtverhältnissen problematisch sein.
Die Lesbarkeit einer Farbkombination lässt sich einfach mit dem WebAIM Contrast Checker überprüfen.
Dort werden Vordergrund- und Hintergrundfarbe als HEX-Code eingegeben. Das Werkzeug berechnet anschließend den Kontrast und zeigt an, ob die Kombination die gängigen Anforderungen an barrierearme Webseiten erfüllt.
Als Orientierung verlangt WCAG AA für normalen Text in der Regel ein Kontrastverhältnis von mindestens 4,5:1, bei großer Schrift mindestens 3:1.