Skip to content

Commit e50ee7b

Browse files
svgeesussvgeesus
committed
[css-color-4][editorial] Refactor, new section Applying Color in CSS. See w3c#7437 
1 parent 3c5f97b commit e50ee7b

1 file changed

Lines changed: 107 additions & 99 deletions

File tree

‎css-color-4/Overview.bs‎

Lines changed: 107 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -421,6 +421,25 @@ Value Definitions</h3>
421421
</tr>
422422
</table>
423423

424+
<!-- BigText: Applying -->
425+
426+
<h2 id="applying-color">Applying Color in CSS</h2>
427+
428+
<!-- BigText: A11y -->
429+
<h3 id="accessibility">
430+
Accessibility and Conveying Information By Color</h3>
431+
432+
Although colors can add significant information to documents
433+
and make them more readable,
434+
color by itself should not be the sole means to convey important information.
435+
Authors should consider the W3C Web Content Accessibility Guidelines [[WCAG21]]
436+
when using color in their documents.
437+
438+
> <a href="https://www.w3.org/TR/WCAG21/#use-of-color"><em>1.4.1 Use of Color:</em>
439+
> Color is not used as the only visual means of conveying information,
440+
> indicating an action, prompting a response, or distinguishing a visual element</a>
441+
442+
424443
<!--
425444
██████ ███████ ██ ███████ ████████ ████████ ████████ ███████ ████████
426445
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
@@ -431,8 +450,8 @@ Value Definitions</h3>
431450
██████ ███████ ████████ ███████ ██ ██ ██ ██ ██ ███████ ██
432451
-->
433452

434-
<h2 id="the-color-property">
435-
Foreground Color: the 'color' property</h2>
453+
<h3 id="the-color-property">
454+
Foreground Color: the 'color' property</h3>
436455

437456
<pre class=propdef>
438457
Name: color
@@ -499,8 +518,8 @@ Foreground Color: the 'color' property</h2>
499518
███████ ██ ██ ██ ██████ ████ ██ ██
500519
-->
501520

502-
<h2 id="transparency">
503-
Transparency: the 'opacity' property</h2>
521+
<h3 id="transparency">
522+
Transparency: the 'opacity' property</h3>
504523

505524
Opacity can be thought of as a postprocessing operation.
506525
Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image,
@@ -601,6 +620,89 @@ Transparency: the 'opacity' property</h2>
601620
since SVG has its own <a href="https://www.w3.org/TR/SVG11/render.html">rendering model</a> ([[!SVG11]], Chapter 3).
602621

603622

623+
<!--
624+
████████ ███ ██████ ██████ ████████ ████████
625+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
626+
██ ██ ██ ██ ██ ██ ██ ██
627+
██ ██ ██ ██ ████ ██ ████ ██████ ██ ██
628+
██ █████████ ██ ██ ██ ██ ██ ██ ██
629+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
630+
██ ██ ██ ██████ ██████ ████████ ████████
631+
-->
632+
633+
<h3 id="tagged-images">Color Space of Tagged Images</h3>
634+
635+
An <dfn export>tagged image</dfn> is an image
636+
that is explicitly assigned a color profile,
637+
as defined by the image format.
638+
This is usually done by including an
639+
International Color Consortium (ICC) profile [[!ICC]].
640+
641+
For example JPEG [[JPEG]], PNG [[PNG]] and TIFF [[TIFF]]
642+
all specify a means to embed an ICC profile.
643+
644+
Image formats may also use other, equivalent methods, often for brevity.
645+
646+
For example, PNG specifies a means (the
647+
<a href="https://www.w3.org/TR/PNG/#11sRGB">sRGB chunk</a>)
648+
to explicitly tag an image as being in the sRGB color space,
649+
without including the sRGB ICC profile.
650+
651+
Tagged RGB images,
652+
and tagged images using a transformation of RGB such as YCbCr,
653+
if the color profile or other identifying information is valid,
654+
must be treated as being in the specified color space.
655+
656+
<wpt>
657+
tagged-images-001.html
658+
tagged-images-002.html
659+
tagged-images-003.html
660+
tagged-images-004.html
661+
</wpt>
662+
663+
If the color profile or other identifying information is invalid, the image is treated as [=untagged images=]
664+
665+
For example, when a browser running on a system with a Display P3 monitor
666+
displays an JPEG image
667+
tagged as being in the ITU Rec BT.2020 [[!Rec.2020]]
668+
color space, it must convert the colors
669+
from ITU Rec BT.2020 to Display P3
670+
so that they display correctly.
671+
It must not treat the ITU Rec BT.2020 values
672+
as if they were Display P3 values, which would produce incorrect colors.
673+
674+
<!--
675+
██ ██ ██ ██ ████████ ███ ██████ ██████ ████████ ████████
676+
██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
677+
██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██
678+
██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ████ ██████ ██ ██
679+
██ ██ ██ ████ ██ █████████ ██ ██ ██ ██ ██ ██ ██
680+
██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
681+
███████ ██ ██ ██ ██ ██ ██████ ██████ ████████ ████████
682+
-->
683+
684+
<h3 id='untagged'>
685+
Color Spaces of Untagged Colors</h3>
686+
687+
Colors specified in HTML,
688+
and [=untagged images=] must be treated
689+
as being in the sRGB color space ([[!SRGB]])
690+
unless otherwise specified.
691+
692+
<wpt>
693+
untagged-images-001.html
694+
</wpt>
695+
696+
An <dfn export>untagged image</dfn> is an image that is not explicitly assigned a color profile, as defined by the image format.
697+
698+
Note that this rule does not apply to untagged videos, since
699+
<dfn export>untagged video</dfn> should be presumed to be in an ITU-defined color space.
700+
* At below 720p, it is Recommendation ITU-R BT.601 [[!ITU-R-BT.601]]
701+
* At 720p, it is SMPTE ST 296 (same colorimetry as 709) [[!SMPTE296]]
702+
* At 1080p, it is Recommendation ITU-R BT.709 [[!ITU-R-BT.709]]
703+
* At 4k (UHDTV) and above, it is ITU-R BT.2020 [[!Rec.2020]] for SDR video
704+
705+
604706
<!--
605707
██████ ███████ ██ ███████ ████████ ████████ ██ ██ ████████ ████████
606708
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
@@ -922,100 +1024,6 @@ any achromatic color will have a [=powerless=] hue component.
9221024
It is intentionally unspecified exactly what "sufficiently close" means for this purpose.
9231025

9241026

925-
<h3 id="notes">
926-
Accessibility and Conveying Information By Color</h3>
927-
928-
Although colors can add significant information to documents
929-
and make them more readable,
930-
color by itself should not be the sole means to convey important information.
931-
Authors should consider the W3C Web Content Accessibility Guidelines [[WCAG21]]
932-
when using color in their documents.
933-
934-
> <a href="https://www.w3.org/TR/WCAG21/#use-of-color"><em>1.4.1 Use of Color:</em>
935-
> Color is not used as the only visual means of conveying information,
936-
> indicating an action, prompting a response, or distinguishing a visual element</a>
937-
938-
<!--
939-
████████ ███ ██████ ██████ ████████ ████████
940-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
941-
██ ██ ██ ██ ██ ██ ██ ██
942-
██ ██ ██ ██ ████ ██ ████ ██████ ██ ██
943-
██ █████████ ██ ██ ██ ██ ██ ██ ██
944-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
945-
██ ██ ██ ██████ ██████ ████████ ████████
946-
-->
947-
948-
<h3 id="tagged-images">Color Space of Tagged Images</h3>
949-
950-
An <dfn export>tagged image</dfn> is an image
951-
that is explicitly assigned a color profile,
952-
as defined by the image format.
953-
This is usually done by including an
954-
International Color Consortium (ICC) profile [[!ICC]].
955-
956-
For example JPEG [[JPEG]], PNG [[PNG]] and TIFF [[TIFF]]
957-
all specify a means to embed an ICC profile.
958-
959-
Image formats may also use other, equivalent methods, often for brevity.
960-
961-
For example, PNG specifies a means (the
962-
<a href="https://www.w3.org/TR/PNG/#11sRGB">sRGB chunk</a>)
963-
to explicitly tag an image as being in the sRGB color space,
964-
without including the sRGB ICC profile.
965-
966-
Tagged RGB images,
967-
and tagged images using a transformation of RGB such as YCbCr,
968-
if the color profile or other identifying information is valid,
969-
must be treated as being in the specified color space.
970-
971-
<wpt>
972-
tagged-images-001.html
973-
tagged-images-002.html
974-
tagged-images-003.html
975-
tagged-images-004.html
976-
</wpt>
977-
978-
If the color profile or other identifying information is invalid, the image is treated as [=untagged images=]
979-
980-
For example, when a browser running on a system with a Display P3 monitor
981-
displays an JPEG image
982-
tagged as being in the ITU Rec BT.2020 [[!Rec.2020]]
983-
color space, it must convert the colors
984-
from ITU Rec BT.2020 to Display P3
985-
so that they display correctly.
986-
It must not treat the ITU Rec BT.2020 values
987-
as if they were Display P3 values, which would produce incorrect colors.
988-
989-
<!--
990-
██ ██ ██ ██ ████████ ███ ██████ ██████ ████████ ████████
991-
██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
992-
██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██
993-
██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ████ ██████ ██ ██
994-
██ ██ ██ ████ ██ █████████ ██ ██ ██ ██ ██ ██ ██
995-
██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
996-
███████ ██ ██ ██ ██ ██ ██████ ██████ ████████ ████████
997-
-->
998-
999-
<h3 id='untagged'>
1000-
Color Spaces of Untagged Colors</h3>
1001-
1002-
Colors specified in HTML,
1003-
and [=untagged images=] must be treated
1004-
as being in the sRGB color space ([[!SRGB]])
1005-
unless otherwise specified.
1006-
1007-
<wpt>
1008-
untagged-images-001.html
1009-
</wpt>
1010-
1011-
An <dfn export>untagged image</dfn> is an image that is not explicitly assigned a color profile, as defined by the image format.
1012-
1013-
Note that this rule does not apply to untagged videos, since
1014-
<dfn export>untagged video</dfn> should be presumed to be in an ITU-defined color space.
1015-
* At below 720p, it is Recommendation ITU-R BT.601 [[!ITU-R-BT.601]]
1016-
* At 720p, it is SMPTE ST 296 (same colorimetry as 709) [[!SMPTE296]]
1017-
* At 1080p, it is Recommendation ITU-R BT.709 [[!ITU-R-BT.709]]
1018-
* At 4k (UHDTV) and above, it is ITU-R BT.2020 [[!Rec.2020]] for SDR video
10191027

10201028
<!--
10211029
████████ ████████ ██████ ███████ ██ ██ ██ ████████
@@ -6526,7 +6534,7 @@ which is a fingerprinting risk.
65266534
Accessibility Considerations {#a11y-sec}
65276535
========================================
65286536

6529-
This specification <a href="#notes">encourages authors to not use
6537+
This specification <a href="#accessibility">encourages authors to not use
65306538
color alone</a> as a distinguishing feature.
65316539

65326540
This specification <a href="#css-system-colors">encourages browsers to ensure

0 commit comments

Comments
 (0)