Wenn die Grafik mit sRGB-Profil (links) die intensivsten Farben zeigt und die anderen (AdobeRGB, ProPhotoRGB) flauer sind, werden die Farbprofile nicht richtig dargestellt. Das kann mehrere Ursachen haben:

• Du surfst mit einem älteren iPad oder iPhone
  Abhilfe: Aktualisiere das Gerät auf iOS 9.3, ab da unterstützt die Browser-Engine Farbprofile. Wenn es kein Update gibt, kenne ich keine Abhilfe :-(
   
• Du surfst mit einem Android-Tablet oder -Smartphone
  Abhilfe: Installiere die Updates Deines Browsers. Hilft das nicht, steige auf Chrome um, der unterstützt seit Chrome/56-Engine auch Farbprofile.

• Du surfst mit einem anderen Mobilgerät
  Abhilfe: keine bekannt :-(
   
• Du nutzt unter Linux, Windows oder macOS einen uralten Browser, der keine Farbprofile unterstützt.
  Abhilfe: Update oder Browserwechsel
   
• Oder bist Du mit Deinem Notebook per UMTS oder Smartphone-Tethering im Internet? Dann kann die Datenkomprimierung durch Deinen Mobilfunkprovider die Ursache sein. Die Provider löschen dann das Farbprofil aus der Datei und Dein Browser hat keine Chance, das Foto richtig darzustellen.
  Abhilfe: siehe Link.

Wenn die drei rechten Balken intensiver aussehen als der linke, unterstützt Dein Monitor mehr als sRGB. Den genauen Farbraumumfang kann der Test natürlich nicht ermitteln, aber aus den Unterschieden der rechten Grafiken ergeben sich ein paar Hinweise:

• Sind die beiden rechten zum zweiten (AdobeRGB) identisch, liegt der Monitor zwischen sRGB und bestenfalls AdobeRGB. Wie weit er an AdobeRGB heranreicht, gibt dieser Test nicht her.

• Ist der dritte Balken (Rec.2020) intensiver als der zweite, geht der Monitor über AdobeRGB hinaus Richtung „klassischem“ erweiterten Farbraum für Fotografen. Der vierte Balken mag dann etwas blasser aussehen, was daran liegt, dass sein Farbraum DCI-P3 nicht ganz von den erweiterten AdobeRGB-Abstimmungen abgedeckt wird.
• Ist der vierte Balken (DCI-P3) der intensivste oder fast zum dritten identisch, geht das Display in Richtung des eher für Videobearbeitung entworfenen Farbraums DCI-P3.

• Du hast keines oder ein falsches Monitorprofil geladen – dann hat der Browser keine Möglichkeit, die Farben korrekt darzustellen.
  Abhilfe: Unter Windows, macOS und Linux Monitorprofil beim Monitorhersteller suchen oder per Colorimeter selbst erstellen, siehe auch der Artikel Praxis und Klippen mit Farbprofilen.
   
• Du surfst unter Android – da gehen keine Monitorprofile
  Abhilfe: Angeblich Android 8/N…  bisher habe ich aber noch kein Gerät mit Android 8 gesehen, das Farbprofile unterstützt.

• Du surfst mit einem Browser, der keine Monitorprofile unterstützt; das prominenteste und ärgerlichste Beispiel dafür sind unter Windows der Internet Explorer und Edge bis 2019.
  Abhilfe: wechsele zu Chrome, Firefox, Vivaldi, Opera, …
  
• Dein Display kommt nicht über sRGB hinaus. Dann nützt natürlich kein Farbprofil und kein Monitorprofil, der Monitor beherrscht keine besseren Farben…
  Abhilfe: keine – naja, außer ein neues Gerät zu kaufen.

Auswertung

Ein Richtig oder Falsch gibt es bei diesem Test nicht, beide Vorgehensweisen haben Vor- und Nachteile:

• Ein Bild ohne Farbprofil als sRGB zu interpretieren, ist für Fotos im Allgemeinen der richtige Weg. So erscheinen sie auf farbkräftigen Monitoren nicht überstrahlt. In einer idealen Welt hätte jedes Foto zwar den sRGB-Farbraum eingeschrieben, aber in der Praxis dürften die allermeisten Fotos im Internet ohne Farbprofil gespeichert sein. Auch haben einige Internet-CMS die Eigenschaft, beim automatischen Skalieren von Fotos deren Farbprofil zu löschen.
• Ein Bild ohne Farbprofil im kompletten Monitorfarbraum auszugeben, ist für Infografiken, Icons oder Webdesign-Elemente der richtige Weg. Hier will man vielleicht das intensivste Grün oder krasseste Rot eines Monitors.

Eine Möglichkeit wäre vielleicht, JPGs und PNGs als sRGB zu interpretieren, weil sie hauptsächlich Fotos enthalten dürften; BMPs und GIFs könnte man im Monitorfarbraum belassen, weil sie meist Logos oder Grafiken enthalten.

Abhilfe

Tatsächlich verhalten sich hier die Browser unterschiedlich:

• Chrome bis v60, Firefox: PNGs werden kalibriert auf sRGB angezeigt, aber GIFs und JPGs mit maximalen Farben.
• Chrome ab v61 (und darauf aufbauende Browser wie Vivaldi und Opera): Alle drei Formate werden kalibriert auf sRGB angezeigt. „Das Internet wird flauer“, wie ein Leser schrieb.
• Internet Explorer: Der ignoriert sowieso den Monitorfarbraum, sodass alle Dateiformate mit maximalen Farben erscheinen.
• Android-Browser: Da Android keine Monitorprofile unterstützt, werden sowieso alle Grafiken mit vollem Farbumfang dargestellt, egal ob sie ein Profil eingeschrieben haben oder nicht.
• Safari unter iOS (macOS noch nicht getestet): Grafiken bis 150×150 Pixel werden ohne Kalibrierung im vollen Monitorfarbraum dargestellt, Grafiken mit höherer Auflösung auf sRGB kalibriert. Geschickter Kompromiss!

Der W3C hat inzwischen klar definiert, dass die CSS- und HTML-Farbangaben im sRGB-Farbraum zu interpretieren sind. Obiger Kasten mit „color:#f00“ muss also das sRGB-Rot der linken Grafik zeigen, #0f0 das Grün der linken Grafik. Das machen allerdings nicht alle Browser so.

Und wenn es ein Browser richtig macht, stellt sich den Webdesignern das Problem: Wie bekommen sie denn nun das kräftigste Rot des Monitors angezeigt (also das des zweiten Balken von links mit rec.2020), und zwar per CSS? Ich versuche das hier auf drei Arten:

• rgb(): Eigentlich sind die RGB-Werte nur bis 255 definiert. Einen höheren Wert könnte ein Browser als Überschreitung des Farbraums interpretieren, war meine Hoffnung. Beim Rot probiere ich 300 als höheren Wert, bei Grün 999.

• hsl(): Eine ähnliche Idee: Der zweite Wert gibt die Sättigung an, und Werte über 100% mögen den Farbraum überschreiten. Beim Rot versuche ich 150%, beim Grün zusätzlich eine höhere Helligkeit.
• Die W3C hat aufgrund der Beschränkung dieser Farbdefinitionen auf sRGB im CSS Color Module Level 4 einen neuen Standard vorgeschlagen, in dem man in CSS Farben unter Angabe eines Farbprofils angeben kann, nämlich als color(<Farbraum>, <Farbwerte>). Die Farbprofile dci-p3 und rec2020 sind dabei vorgegeben. Bisher ist mir noch kein Browser bekannt, der das unterstützt; dann bleibt das Feld weiß. Beim Rot steht kein Komma zwischen Farbraum und Werten, beim Grün schon – die W3C-Vorschläge sind da nicht eindeutig.