Ensure proper color contrast according to WCAG AA

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2018-04-18 15:38:30 +02:00 committed by Morris Jobke
parent 0dc52bf1c9
commit e7d6410f25
No known key found for this signature in database
GPG Key ID: FE03C3A163FEDE68
4 changed files with 16 additions and 8 deletions

View File

@ -100,7 +100,7 @@
}
#app-sidebar .file-details {
color: #999;
color: $color-text-details;
}
#app-sidebar .action-favorite {

View File

@ -147,10 +147,9 @@ table tr.mouseOver td {
tbody a { color: $color-main-text; }
span.conflict-path, span.extension, span.uploading, td.date {
color: #999;
color: $color-text-details;
}
span.conflict-path, span.extension {
opacity: .7;
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
-o-transition: opacity 300ms;
@ -162,11 +161,11 @@ tr:focus span.conflict-path,
tr:hover span.extension,
tr:focus span.extension {
opacity: 1;
color: #777;
color: $color-text-details;
}
table th, table th a {
color: #999;
color: $color-text-details;
}
table.multiselect th a {
color: #000;

View File

@ -1327,7 +1327,9 @@
// size column
if (typeof(fileData.size) !== 'undefined' && fileData.size >= 0) {
simpleSize = humanFileSize(parseInt(fileData.size, 10), true);
sizeColor = Math.round(160-Math.pow((fileData.size/(1024*1024)),2));
// rgb(118, 118, 118) / #767676
// min. color contrast for normal text on white background according to WCAG AA
sizeColor = Math.round(118-Math.pow((fileData.size/(1024*1024)),2));
} else {
simpleSize = t('files', 'Pending');
}
@ -1342,8 +1344,10 @@
// difference in days multiplied by 5 - brightest shade for files older than 32 days (160/5)
var modifiedColor = Math.round(((new Date()).getTime() - mtime )/1000/60/60/24*5 );
// ensure that the brightest color is still readable
if (modifiedColor >= '160') {
modifiedColor = 160;
// rgb(118, 118, 118) / #767676
// min. color contrast for normal text on white background according to WCAG AA
if (modifiedColor >= '118') {
modifiedColor = 118;
}
var formatted;
var text;

View File

@ -7,6 +7,11 @@ $color-warning: #ffcc44;
$color-success: #46ba61;
$color-primary-element: $color-primary;
// rgb(118, 118, 118) / #767676
// min. color contrast for normal text on white background according to WCAG AA
// (Works as well: color: #000; opacity: 0.57;)
$color-text-details: #767676;
@function nc-darken($color, $value) {
@return darken($color, $value);
}