Javascript: Farbkontrast überprüfen auf einer Webseite

marlem

Bekanntes Mitglied
Hallo,

das was ich programmieren möchte mit Javascript kann dieses Programm:

Angenommen in meinem Body-Tag sind folgende Farbwerte gesetzt:
CSS:
body {     
      background-color:  #FBEFF2;
      color: #000;
      }

Frage:
Gibt es in Javascript die Möglichkeit aus diesen beiden Werten
zu berechnen wie gut der Farbkontrast ist?
 

mihe7

Top Contributor
Danke! Super Link!

Unabhängig von theoretischen Grundlagen ist der entscheidende Punkt:
Für das korrekte Berechnen des Kontrastes wirst du aber kaum drum rum kommen, die Seite vollständig zu rendern.

Du musst Dich von dem Gedanken lösen, dass man anhand von HTML und CSS ableiten könnte, wie die Seite sich im Browser darstellt. Schon für statische Seiten wäre das mit einem riesigen Aufwand verbunden, bei dynamischen ist es praktisch ein Ding der Unmöglichkeit:

HTML:
<div id="app"></div>

<script>
var colors = [ "red", "green", "blue", "yellow", "cyan", "magenta", "black" ];
var app = document.getElementById("app");
var counter = 0;
app.style="width:100px;height:100px;";
window.setInterval(function() {
    app.style.backgroundColor = colors[counter];
    counter = (counter + 1) % colors.length;
}, 500);
</script>
 

marlem

Bekanntes Mitglied
Du musst Dich von dem Gedanken lösen, dass man anhand von HTML und CSS ableiten könnte

Bei der Analyse einer Webseite auf Barrierefreiheit geht es nicht darum wie eine Webseite dargestellt wird,
sondern wie wurde sie programmiert!

Wenn ich einen Auftrag bekomme eine Webseite auf Barrierefreiheit zu analysieren,
schaue mir HTML- und CSS-Code an, weil viele Sachen können nur so überprüft werden.
 

mrBrown

Super-Moderator
Mitarbeiter
Bei der Analyse einer Webseite auf Barrierefreiheit geht es nicht darum wie eine Webseite dargestellt wird,
sondern wie wurde sie programmiert!

Wenn ich einen Auftrag bekomme eine Webseite auf Barrierefreiheit zu analysieren,
schaue mir HTML- und CSS-Code an, weil viele Sachen können nur so überprüft werden.
Also, egal ob sie Barrierefrei nutzbar ist, Hauptsache sie ist gut programmiert?
Oder anders: es ist egal ob ein eingeschränkter Nutzer sie nutzen kann, solange der Entwickler den Code schön findet?

Das klingt nach genau dem falschen Ansatz. (Außer natürlich um Kunden zufrieden zustellen, die bestätigt bekommen wollen, dass sie total Barrierefrei sind)
 

marlem

Bekanntes Mitglied
solange der Entwickler den Code schön findet?

Nein, mit schön hat es nichts zu tun.
Nochmal ein deutlicher Hinweis:
Es können viele Kriterien nicht automatisiert getestet werden.

Aber ich mache Beispiele:
1.1.1b Alternativtexte für Grafiken und Objekte
Ich überprüfe im HTML-Code ob Bilder einen Alternativtext haben

1.1.1c Leere alt-Attribute für Layoutgrafiken
Ich überprüfe im HTML-Code ob es Layoutgrafiken gibt

1.1.1d Alternativen für CAPTCHAs
Ich schaue mir die Webseite an ob es CAPTCHAs gibt

1.2.2a Aufgezeichnete Videos mit Untertiteln
Ich schaue mir 30 sekunden ein Video an um herauszufinden ob es Untertitel hat
oder ob Untertitel eingeschaltet werden können.

1.3.1a HTML-Strukturelemente für Überschriften
Ich schaue mir den HTML-Code an und überprüfe ob H-Tags richtig verwendet werden.
Die Überprüfung kann auch mit einem Browser-Plugin gemacht werden.

1.3.1e Datentabellen richtig aufgebaut
Ich schaue den HTML-Code an und überprüfe ob es Datentabellen gibt und ob
diese richtig aufgebaut sind.

1.4.4a Text auf 200% vergrößerbar
Hier benutze den Zoom des Browsers.
HIER spielt auch die Darstellung eine Rolle.
Ich überprüfe ob der komplette Inhalt der Webseite,
nach dem sie gezoomt wurde, noch Lesbar ist oder ob sich
Inhalte überlappen oder komplett verschwunden sind.

2.1.1a Ohne Maus nutzbar
Ich überprüfe ob alle Bedienelemente per Tabulatortaste erreichbar sind.

2.4.7a Aktuelle Position des Fokus deutlich
Ich Überprüfe ob es ersichtlich ist, auf welcher Seite ich mich innerhalb
des Webauftritts befinde.

3.1.1a Hauptsprache angegeben
Ich überprüfe im HTML-Code ob die Hauptsprache der Webseite angegeben wurde

4.1.1a Korrekte Syntax
Prüfschritt erfüllt: Das Prüfergebnis des W3C-HTML-Validators ist positiv.
 

mrBrown

Super-Moderator
Mitarbeiter
Diese beiden Dinge widersprechen sich z.T.:

Es können viele Kriterien nicht automatisiert getestet werden.
Bei der Analyse einer Webseite auf Barrierefreiheit geht es nicht darum wie eine Webseite dargestellt wird,
sondern wie wurde sie programmiert!

Wie sie programmiert ist, kannst du automatisiert mit X Regeln erschlagen (es wird halt unglaublich viel Aufwand), das was nicht automatisiert testbar ist, ist die Darstellung.
Also entweder, viele Kriterien sind automatisiert testbar, oder es geht nicht darum, wie sie programmiert wurde.


@mihe7's Beispiel zeigt das ja auch ganz schön: Wenn du nur HTML und CSS auswertest, ist das Beispiel super lesbar. Mit JavaScript dazu flackert der Hintergrund und es wird unleserlich.
Wenn es nur darum geht, wie die Programmiert ist, ist das super. Aber Lesen kann es trotzdem niemand.




Un zu dem was @mihe7 und ich vorher meinten:

Um Dinge automatisiert testen zu können (zb den Kontrast), musst du das gesamte CSS und HTML auswerten und in einen "renderbaren Zustand" bringen. Du musst für jedes Element Position, Größe, z-Index, Farbe etc berechnet haben, was dann der Darstellung entspricht (zur wirklichen Darstellung fehlt dann nur noch das triviale Zeichnen einfacher geometrischer Formen).

Natürlich ist das machbar (angenommen, es gibt kein JS), aber das ist ein extrem großer Aufwand.
 

mihe7

Top Contributor
Huch, wasn hier los? :) @mrBrown hat die Probleme sehr schön auf den Punkt gebracht.

Mein zugegebenermaßen evtl. zu einfaches Beispiel sollte verdeutlichen, dass Dynamik die zeitliche Komponente ins Spiel bringt. Heute gibt es kaum noch Seiten, deren DOM statisch ist, vielmehr hängt das Ergebnis vom Zeitpunkt der Betrachtung ab.

Das bedeutet nicht, dass Deine Kriterien hinfällig würden. Eine statische Analyse kann aber nur ein Indiz liefern.
 

marlem

Bekanntes Mitglied
Schaut Euch mal bitte diesen Link an:

Taugt der Kontrastrechner was?
 

mrBrown

Super-Moderator
Mitarbeiter
Vermutlich taugt der genauso viel wie alle 79194638581537 anderen.
So viel kann man da ja nicht bei falsch machen, hab’s aber jetzt auch nicht für zig Werte getestet...
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
M JavaScript/HTML/CSS Hilfe HTML / CSS 1
J Mit Javascript eine Textdatei auslesen... HTML / CSS 28
S jqmath in javascript einbinden HTML / CSS 3
M Javascript: HTML-Datei erstellen und auf Festplatte speichern HTML / CSS 8
M Javascript: CSS Parsen um herauszufinden ob relativer Schriftgrößen verwendet werden HTML / CSS 23
M HTML-Code einer fremden Webseite auslesen - geht das mit Javascript HTML / CSS 19
S Sicherheitsaspekt JavaScript HTML / CSS 3
M Webservice per Javascript ansprechen HTML / CSS 5
G php in javascript einbinden HTML / CSS 13
E Javascript/ Eventlistener ohne click? HTML / CSS 2
A Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript) HTML / CSS 11
J JavaScript Woerter erkenen HTML / CSS 4
C Eclipse und Javascript full autocomplete? HTML / CSS 1
A DragDrop mehrerer Shapes im SVG per Javascript? HTML / CSS 0
M Javascript Tastatureingabe HTML / CSS 2
B javascript ausgabe in Text HTML / CSS 2
E Javascript Status Abfrage HTML / CSS 7
J Javascript im DOM einer Webseite ändern HTML / CSS 1
H javascript - html Beispiel LQH, verwirklichung HTML / CSS 1
P JavaScript var an bean Setter übergeben HTML / CSS 2
Z Erste Website CSS3 HTML5 Javascript Jquery - Kritik HTML / CSS 3
P RSS FEED/ JSON/ Filter By Date/ Handlebars / Javascript HTML / CSS 0
B Externes Suchfeld - Javascript. REST? HTML / CSS 0
S JavaScript und Ajax Erfahrene Gesucht!!!! HTML / CSS 0
V Javascript Adobe Acrobat XI Pro Formular Dropdown-Liste -> vorbelegte Checkboxen HTML / CSS 1
0 Javascript Leaflet Marker Popup mit Adresse HTML / CSS 1

Ähnliche Java Themen

Neue Themen


Oben