Tweak color contrast

Follow-up: #393. Fixes #262.
whatwg · Mar 17, 2022 · 4e03c7a · 4e03c7a
1 parent 2c2eabb
commit 4e03c7a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/images.whatwg.org/content-venn.svg b/images.whatwg.org/content-venn.svg
diff --git a/resources.whatwg.org/standard-shared-with-dev.css b/resources.whatwg.org/standard-shared-with-dev.css
@@ -101,7 +101,7 @@ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
   position: absolute;
   z-index: 8;
   right: 0.3em;
-  background: #EEE;
+  background: #F7F7F7;
   color: black;
   box-shadow: 0 0 3px #999;
   overflow: hidden;
@@ -488,9 +488,9 @@ h6 + .mdn-anno { margin: -40px 0 0 0; }
  h6 + .mdn { margin: -40px 0 0 0; }
 
 .mdn > div { margin: 0; padding-bottom: 1px; }
-.mdn > div > .less-than-two-engines-flag { color: red; background-color: #eee; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }
+.mdn > div > .less-than-two-engines-flag { color: #D50606; background-color: #F7F7F7; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }
 .mdn > div > .all-engines-flag { color: green; background-color: #eee; }
-.mdn > div > details > .less-than-two-engines-text { color: red; font-weight: bold; margin-top: 0; padding-bottom: 12px; }
+.mdn > div > details > .less-than-two-engines-text { color: #D50606; font-weight: bold; margin-top: 0; padding-bottom: 12px; }
 .mdn > div > details > .all-engines-text { color: green; font-weight: bold; margin-top: 0; padding-bottom: 12px; }
 .mdn > div:last-of-type details > .all-engines-text, .mdn > div:last-of-type > details > .less-than-two-engines-text { padding-bottom: 0; margin-bottom: 0; }
 .mdn :link { color: #0000EE; }

diff --git a/resources.whatwg.org/standard.css b/resources.whatwg.org/standard.css
@@ -49,8 +49,8 @@ body { margin: 0 auto; padding: 0 2.5em 2em 2.5em; max-width: 80em; background:
 }
 
 code { color: #666666; font-style: normal; }
-dfn code { color: orangered; }
-code :link, :link code, code :visited, :visited code { color: orangered; }
+dfn code { color: #CE3C05; }
+code :link, :link code, code :visited, :visited code { color: #CE3C05; }
 pre :link, pre :visited { color: inherit; }
 
 html, ::before { font: 1em/1.45 Helvetica Neue, sans-serif, Droid Sans Fallback; }
@@ -175,7 +175,7 @@ dl.triple { padding: 0 0 0 1em; }
 dl.triple dt, dl.triple dd { margin: 0; display: inline }
 dl.triple dt:after { content: ':'; }
 dl.triple dd:after { content: '\A'; white-space: pre; }
-tr.rare { background: #EEEEEE; color: #333333; }
+tr.rare { background: #F7F7F7; color: #333333; }
 
 /*
  * .domintro, .note, .warning, .example, .XXX, .critical
@@ -277,22 +277,22 @@ dl.domintro dd p:last-child {
 }
 
 .warning {
-  color: red;
+  color: #D50606;
   background: #FFFFCA;
   font-weight: bolder;
   font-style: italic;
 }
 .warning::before {
   color: yellow;
-  background: red;
+  background: #D50606;
 }
 .warning em, .warning i, .warning var, .warning cite {
   font-style: normal;
 }
 
 .example {
   color: #222222;
-  background: #EEEEEE;
+  background: #F7F7F7;
 }
 .example::before {
   background: #222222;
@@ -306,14 +306,14 @@ td > .example:only-child::before {
 }
 
 .XXX {
-  color: #E50000;
+  color: #D50606;
   background: white;
-  border: solid red;
+  border: solid #D50606;
 }
 
 .critical {
   background: #FFFFCC;
-  border: double thick red;
+  border: double thick #D50606;
 }
 
 figure.diagrams { border: thin solid black; background: white; padding: 1em; }
@@ -509,7 +509,7 @@ pre > code.idl::before, pre.idl::before, pre > code.css::before, pre.highlight.l
 }
 
 pre > code.idl, pre.idl {
-  background: #EEE;
+  background: #F7F7F7;
 }
 
 pre > code.css, pre.highlight.lang-css {

diff --git a/whatwg.org/style/subpages.css b/whatwg.org/style/subpages.css
@@ -86,8 +86,8 @@ dl.compact > div > dd:not(:last-of-type)::after { content: "; "; }
 .note em, .note i, .note var { font-style: normal; }
 span.note { padding: 0 2em; }
 .note::before { content: 'Note'; background: green; color: white; padding: 0.15em 0.25em; font-style: normal; position: absolute; top: -0.2em; left: -1.5em; transform: rotate(-5deg); }
-.example { display: block; color: #222222; background: #EEEEEE; margin-left: 2em; padding-left: 3em; position: relative; }
-.example::before { font-style: normal; content: 'Example'; background: #222222; color: #EEEEEE; padding: 0.15em 0.25em; font: 1em Helvetica Neue, sans-serif, Droid Sans Fallback; position: absolute; top: 0.2em; left: -2.25em; transform: rotate(-5deg); }
+.example { display: block; color: #222222; background: #F7F7F7; margin-left: 2em; padding-left: 3em; position: relative; }
+.example::before { font-style: normal; content: 'Example'; background: #222222; color: #F7F7F7; padding: 0.15em 0.25em; font: 1em Helvetica Neue, sans-serif, Droid Sans Fallback; position: absolute; top: 0.2em; left: -2.25em; transform: rotate(-5deg); }
 
 /* SELF LINK STYLES; they assume only inside headings, on this site */
 a.self-link {