dl
ist das Mittel der Wahl – wie von @Rolf B gezeigt. Mit zugänglichem Text, nicht nur visuelle Farbflächen.
Ganz sicher. Aber nicht im fiddle, denn hier genau haben wir das Problem: Ich kann die dl, dd und dt in roter Schrift und auf dem schwarzen Hintergrund nicht auseinanderhalten. 😉
Zudem kommt es immer auf die Anwendung selber an, ob man zusätzlichen Erklärtext im Farbfeld haben möchte. Bei mir ist es so, dass ich das definitiv nicht möchte. Dass das manche User ggf. ausschließt? Ist mir bewußt und eingepreist. Alternativkosten nennt man sowas in der Wirtschaft und ist bei nahezu jeder Entscheidung so. Man kanns halt nicht allen recht machen.
Trotzdem ist Rolfs Lösung für mich sehr nütlich, denn ich kannte diese Art von Listen bisher nicht und habe mir viele Beispiele angesehen, die ich selber zuvor nur mittels einer Tabelle hätte lösen können. Insofern gut zu wissen, dass es hierfür in css etwas brauchbares gibt.
Jörg