[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-panel-devel
Subject:    D7424: Very slightly increase text contrast for the default Breeze color scheme
From:       Julian Wolff <noreply () phabricator ! kde ! org>
Date:       2017-10-20 15:24:16
Message-ID: 20171020152414.50027.0D3021CA8AA7DE04 () phabricator ! kde ! org
[Download RAW message or body]

progwolff added a comment.


  In https://phabricator.kde.org/D7424#157438, @ngraham wrote:
  
  > In https://phabricator.kde.org/D7424#157398, @progwolff wrote:
  >
  > > The W3C recommendation you referenced has an online tool to check specific \
colors: http://juicystudio.com/services/luminositycontrastratio.php#specify  > >
  > > Current breeze colors give
  > >
  > > > Passed at Level AAA: The luminosity contrast ratio is very good for the \
chosen colours (#fcfcfc and #31363b).  >
  >
  > To be fair, black and white do too:
  >
  > > Passed at Level AAA: The luminosity contrast ratio is very good for the chosen \
colours (#fff and #000).  
  
  Sure, as W3C only recommends a minimum contrast, no maximum.
  
  > 
  > 
  > In https://phabricator.kde.org/D7424#157398, @progwolff wrote:
  > 
  >> There are also studies that warn against using too high contrast in text. For \
example https://www.researchgate.net/profile/Ricardo_Baeza-Yates/publication/239761586 \
_Layout_guidelines_for_web_text_and_a_web_service_to_improve_accessibility_for_dyslexics/links/02e7e53313bbc5c9bc000000.pdf
  > 
  > 
  > That paper is about people with Dyslexia. Certainly something to be aware of, but \
not exactly a universally-applicable observation.  > 
  > I am sure we can play the dueling studies game till the cows come home, what with \
the volume of scholarship out there. In the end, this has to be a simple judgment \
call, based on aesthetics and which groups we're willing to saddle with slightly less \
usability. It seems like those preferring the lower-contrast text are the young, \
those with good eyesight, and possibly Dyslexics. Those who prefer higher contrast \
text are the older, or those with poorer eyesight.  
  Fully agree. This judgement should however probably come from VDG, in particular \
from those who were involved in the initial design of the breeze color scheme.  
  > The nice thing about Plasma is that this is all so easily changeable, so there's \
less pressure, but I still think an update to the defaults makes sense so we don't \
leave older people and those with worse eyesight out in the cold. Perhaps a less \
extreme change might make sense--a compromise midway between the status quo and my \
proposed change? How about this:  > 
  > - Where there's a solid white background, use dark-gray-but-not-quite-black text
  > - Where there's a gray background, do use solid black text
  > 
  >   That way we have better contrast, but we never have the total starkness of \
black text on a white background.  
  This might work.

REPOSITORY
  R31 Breeze

REVISION DETAIL
  https://phabricator.kde.org/D7424

To: ngraham, hpereiradacosta, jensreuterberg, jriddell, kvermette, #vdg
Cc: progwolff, broulik, sebas, plasma-devel, ZrenBot, lesliezhai, ali-mohamed, \
jensreuterberg, abetts, apol, mart


[Attachment #3 (unknown)]

<table><tr><td style="">progwolff added a comment.
</td><a style="text-decoration: none; padding: 4px 8px; margin: 0 8px 8px; float: \
right; color: #464C5C; font-weight: bold; border-radius: 3px; background-color: \
#F7F7F9; background-image: linear-gradient(to bottom,#fff,#f1f0f1); display: \
inline-block; border: 1px solid rgba(71,87,120,.2);" \
href="https://phabricator.kde.org/D7424" rel="noreferrer">View \
Revision</a></tr></table><br /><div><div><blockquote style="border-left: 3px solid \
#8C98B8;  color: #6B748C;
          font-style: italic;
          margin: 4px 0 12px 0;
          padding: 8px 12px;
          background-color: #F8F9FC;">
<div style="font-style: normal;
          padding-bottom: 4px;">In <a href="https://phabricator.kde.org/D7424#157438" \
style="background-color: #e7e7e7;  border-color: #e7e7e7;
          border-radius: 3px;
          padding: 0 4px;
          font-weight: bold;
          color: black;text-decoration: none;" rel="noreferrer">D7424#157438</a>, <a \
href="https://phabricator.kde.org/p/ngraham/" style="  border-color: #f1f7ff;
              color: #19558d;
              background-color: #f1f7ff;
                border: 1px solid transparent;
                border-radius: 3px;
                font-weight: bold;
                padding: 0 4px;" rel="noreferrer">@ngraham</a> wrote:</div>
<div style="margin: 0;
          padding: 0;
          border: 0;
          color: rgb(107, 116, 140);"><blockquote style="border-left: 3px solid \
#8C98B8;  color: #6B748C;
          font-style: italic;
          margin: 4px 0 12px 0;
          padding: 8px 12px;
          background-color: #F8F9FC;">
<div style="font-style: normal;
          padding-bottom: 4px;">In <a href="https://phabricator.kde.org/D7424#157398" \
style="background-color: #e7e7e7;  border-color: #e7e7e7;
          border-radius: 3px;
          padding: 0 4px;
          font-weight: bold;
          color: black;text-decoration: none;" rel="noreferrer">D7424#157398</a>, <a \
href="https://phabricator.kde.org/p/progwolff/" style="  border-color: #f1f7ff;
              color: #19558d;
              background-color: #f1f7ff;
                border: 1px solid transparent;
                border-radius: 3px;
                font-weight: bold;
                padding: 0 4px;" rel="noreferrer">@progwolff</a> wrote:</div>
<div style="margin: 0;
          padding: 0;
          border: 0;
          color: rgb(107, 116, 140);"><p>The W3C recommendation you referenced has an \
online tool to check specific colors: <a \
href="http://juicystudio.com/services/luminositycontrastratio.php#specify" \
class="remarkup-link" target="_blank" \
rel="noreferrer">http://juicystudio.com/services/luminositycontrastratio.php#specify</a></p>


<p>Current breeze colors give</p>

<blockquote style="border-left: 3px solid #a7b5bf; color: #464c5c; font-style: \
italic; margin: 4px 0 12px 0; padding: 4px 12px; background-color: \
#f8f9fc;"><p>Passed at Level AAA: The luminosity contrast ratio is very good for the \
chosen colours (#fcfcfc and #31363b).</p></blockquote></div> </blockquote>

<p>To be fair, black and white do too:</p>

<blockquote style="border-left: 3px solid #a7b5bf; color: #464c5c; font-style: \
italic; margin: 4px 0 12px 0; padding: 4px 12px; background-color: \
#f8f9fc;"><p>Passed at Level AAA: The luminosity contrast ratio is very good for the \
chosen colours (#fff and #000).</p></blockquote></div> </blockquote>

<p>Sure, as W3C only recommends a minimum contrast, no maximum.</p>

<blockquote style="border-left: 3px solid #a7b5bf; color: #464c5c; font-style: \
italic; margin: 4px 0 12px 0; padding: 4px 12px; background-color: #f8f9fc;">

<blockquote style="border-left: 3px solid #8C98B8;
          color: #6B748C;
          font-style: italic;
          margin: 4px 0 12px 0;
          padding: 8px 12px;
          background-color: #F8F9FC;">
<div style="font-style: normal;
          padding-bottom: 4px;">In <a href="https://phabricator.kde.org/D7424#157398" \
style="background-color: #e7e7e7;  border-color: #e7e7e7;
          border-radius: 3px;
          padding: 0 4px;
          font-weight: bold;
          color: black;text-decoration: none;" rel="noreferrer">D7424#157398</a>, <a \
href="https://phabricator.kde.org/p/progwolff/" style="  border-color: #f1f7ff;
              color: #19558d;
              background-color: #f1f7ff;
                border: 1px solid transparent;
                border-radius: 3px;
                font-weight: bold;
                padding: 0 4px;" rel="noreferrer">@progwolff</a> wrote:</div>
<div style="margin: 0;
          padding: 0;
          border: 0;
          color: rgb(107, 116, 140);"><p>There are also studies that warn against \
using too high contrast in text. For example <a \
href="https://www.researchgate.net/profile/Ricardo_Baeza-Yates/publication/239761586_L \
ayout_guidelines_for_web_text_and_a_web_service_to_improve_accessibility_for_dyslexics/links/02e7e53313bbc5c9bc000000.pdf" \
class="remarkup-link" target="_blank" \
rel="noreferrer">https://www.researchgate.net/profile/Ricardo_Baeza-Yates/publication/ \
239761586_Layout_guidelines_for_web_text_and_a_web_service_to_improve_accessibility_for_dyslexics/links/02e7e53313bbc5c9bc000000.pdf</a></p></div>
 </blockquote>

<p>That paper is about people with Dyslexia. Certainly something to be aware of, but \
not exactly a universally-applicable observation.</p>

<p>I am sure we can play the dueling studies game till the cows come home, what with \
the volume of scholarship out there. In the end, this has to be a simple judgment \
call, based on aesthetics and which groups we&#039;re willing to saddle with slightly \
less usability. It seems like those preferring the lower-contrast text are the young, \
those with good eyesight, and possibly Dyslexics. Those who prefer higher contrast \
text are the older, or those with poorer eyesight.</p></blockquote>

<p>Fully agree. This judgement should however probably come from VDG, in particular \
from those who were involved in the initial design of the breeze color scheme.</p>

<blockquote style="border-left: 3px solid #a7b5bf; color: #464c5c; font-style: \
italic; margin: 4px 0 12px 0; padding: 4px 12px; background-color: #f8f9fc;"><p>The \
nice thing about Plasma is that this is all so easily changeable, so there&#039;s \
less pressure, but I still think an update to the defaults makes sense so we \
don&#039;t leave older people and those with worse eyesight out in the cold. Perhaps \
a less extreme change might make sense--a compromise midway between the status quo \
and my proposed change? How about this:</p>

<ul class="remarkup-list">
<li class="remarkup-list-item">Where there&#039;s a solid white background, use \
dark-gray-but-not-quite-black text</li> <li class="remarkup-list-item">Where \
there&#039;s a gray background, do use solid black text <br /><br />
That way we have better contrast, but we never have the total starkness of black text \
on a white background.</li> </ul></blockquote>

<p>This might work.</p></div></div><br \
/><div><strong>REPOSITORY</strong><div><div>R31 Breeze</div></div></div><br \
/><div><strong>REVISION DETAIL</strong><div><a \
href="https://phabricator.kde.org/D7424" \
rel="noreferrer">https://phabricator.kde.org/D7424</a></div></div><br \
/><div><strong>To: </strong>ngraham, hpereiradacosta, jensreuterberg, jriddell, \
kvermette, VDG<br /><strong>Cc: </strong>progwolff, broulik, sebas, plasma-devel, \
ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, abetts, apol, mart<br /></div>



[prev in list] [next in list] [prev in thread] [next in thread] 

Configure | About | News | Add a list | Sponsored by KoreLogic