Investigate colour consistency in Seven

Created on 7 July 2014, almost 11 years ago
Updated 8 June 2025, 17 days ago

Problem/Motivation

For fun, I tried out CSS colorguard on Seven's style.css. These were the results:

Collision: #FFFFFF, #F2F2F0
  - #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (2.8685121210852613) to #F2F2F0 [line: 178]
Collision: #FFFFFF, #FAFAF7
  - #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (1.8910238114726081) to #FAFAF7 [line: 185, 216]
Collision: #FFFFFF, #F5F5F2
  - #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (2.596384214251071) to #F5F5F2 [line: 582]
Collision: #FFFFFF, #F7FCFF
  - #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (2.5734572553965034) to #F7FCFF [line: 596]
Collision: #FFFFFF, #F8F8F8
  - #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (1.400400548685863) to #F8F8F8 [line: 949, 973]
Collision: #FFFFFF, #F1F1F1
  - #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (2.8384025881055353) to #F1F1F1 [line: 1270]
Collision: #FFFFFF, #F7F7F7
  - #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (1.6034878674096535) to #F7F7F7 [line: 1404]
Collision: #E0E0D8, #D9D8D4
  - #E0E0D8 [line: 79] is too close (2.711556215737556) to #D9D8D4 [line: 377]
Collision: #E0E0D8, #E6E4DF
  - #E0E0D8 [line: 79] is too close (2.2191336773028025) to #E6E4DF [line: 589]
Collision: #BFBFBF, #BFBFBA
  - #BFBFBF [line: 177, 270, 462, 1395, 1396, 1405, 1406] is too close (2.6953452935381748) to #BFBFBA [line: 583]
Collision: #F2F2F0, #FAFAF7
  - #F2F2F0 [line: 178] is too close (1.6983522733917733) to #FAFAF7 [line: 185, 216]
Collision: #F2F2F0, #F5F5F2
  - #F2F2F0 [line: 178] is too close (0.7929269769959084) to #F5F5F2 [line: 582]
Collision: #F2F2F0, #EEEEEE
  - #F2F2F0 [line: 178] is too close (1.3415681431344146) to #EEEEEE [line: 781]
Collision: #F2F2F0, #F8F8F8
  - #F2F2F0 [line: 178] is too close (1.6547771593670217) to #F8F8F8 [line: 949, 973]
Collision: #F2F2F0, #F3F4EE
  - #F2F2F0 [line: 178] is too close (2.1805473824168184) to #F3F4EE [line: 1057]
Collision: #F2F2F0, #F1F1F1
  - #F2F2F0 [line: 178] is too close (1.0867824593337747) to #F1F1F1 [line: 1270]
Collision: #F2F2F0, #ECECEC
  - #F2F2F0 [line: 178] is too close (1.6314065137235383) to #ECECEC [line: 1393]
Collision: #F2F2F0, #F7F7F7
  - #F2F2F0 [line: 178] is too close (1.5058323481535356) to #F7F7F7 [line: 1404]
Collision: #FAFAF7, #F5F5F2
  - #FAFAF7 [line: 185, 216] is too close (1.0164250954128329) to #F5F5F2 [line: 582]
Collision: #FAFAF7, #EEEEEE
  - #FAFAF7 [line: 185, 216] is too close (2.89561846277564) to #EEEEEE [line: 781]
Collision: #FAFAF7, #F8F8F8
  - #FAFAF7 [line: 185, 216] is too close (1.6198693615911717) to #F8F8F8 [line: 949, 973]
Collision: #FAFAF7, #F3F4EE
  - #FAFAF7 [line: 185, 216] is too close (2.120064753614388) to #F3F4EE [line: 1057]
Collision: #FAFAF7, #F1F1F1
  - #FAFAF7 [line: 185, 216] is too close (2.393557822887608) to #F1F1F1 [line: 1270]
Collision: #FAFAF7, #F7F7F7
  - #FAFAF7 [line: 185, 216] is too close (1.6767835664445838) to #F7F7F7 [line: 1404]
Collision: #004F80, #004875
  - #004F80 [line: 209, 302, 380, 381, 395, 417] is too close (2.4319131786444412) to #004875 [line: 627, 639]
Collision: #D9D8D4, #E6E4DF
  - #D9D8D4 [line: 377] is too close (2.7964531982360676) to #E6E4DF [line: 589]
Collision: #D9D8D4, #DCDCDC
  - #D9D8D4 [line: 377] is too close (2.2633838766664445) to #DCDCDC [line: 848]
Collision: #898989, #8C8C8C
  - #898989 [line: 506] is too close (1.0544214038978428) to #8C8C8C [line: 519]
Collision: #F5F5F2, #EEEEEE
  - #F5F5F2 [line: 582] is too close (2.1219995374086125) to #EEEEEE [line: 781]
Collision: #F5F5F2, #F8F8F8
  - #F5F5F2 [line: 582] is too close (1.7154961593407352) to #F8F8F8 [line: 949, 973]
Collision: #F5F5F2, #F3F4EE
  - #F5F5F2 [line: 582] is too close (1.6871973355176362) to #F3F4EE [line: 1057]
Collision: #F5F5F2, #F1F1F1
  - #F5F5F2 [line: 582] is too close (1.7676049272468808) to #F1F1F1 [line: 1270]
Collision: #F5F5F2, #ECECEC
  - #F5F5F2 [line: 582] is too close (2.4240417482007603) to #ECECEC [line: 1393]
Collision: #F5F5F2, #F7F7F7
  - #F5F5F2 [line: 582] is too close (1.6485330295892249) to #F7F7F7 [line: 1404]
Collision: #BFBFBA, #BEBFB9
  - #BFBFBA [line: 583] is too close (0.7940828671816116) to #BEBFB9 [line: 678, 679, 683, 686]
Collision: #F7FCFF, #F8F8F8
  - #F7FCFF [line: 596] is too close (2.5395727270940958) to #F8F8F8 [line: 949, 973]
Collision: #F7FCFF, #F7F7F7
  - #F7FCFF [line: 596] is too close (2.598075063107024) to #F7F7F7 [line: 1404]
Collision: #EEEEEE, #F8F8F8
  - #EEEEEE [line: 781] is too close (2.066802292060734) to #F8F8F8 [line: 949, 973]
Collision: #EEEEEE, #F1F1F1
  - #EEEEEE [line: 781] is too close (0.6285798809399238) to #F1F1F1 [line: 1270]
Collision: #EEEEEE, #ECECEC
  - #EEEEEE [line: 781] is too close (0.4232290259340545) to #ECECEC [line: 1393]
Collision: #EEEEEE, #F7F7F7
  - #EEEEEE [line: 781] is too close (1.8637337414041408) to #F7F7F7 [line: 1404]
Collision: #F8F8F8, #F1F1F1
  - #F8F8F8 [line: 949, 973] is too close (1.4383297013410457) to #F1F1F1 [line: 1270]
Collision: #F8F8F8, #ECECEC
  - #F8F8F8 [line: 949, 973] is too close (2.4899061879839244) to #ECECEC [line: 1393]
Collision: #F8F8F8, #F7F7F7
  - #F8F8F8 [line: 949, 973] is too close (0.20311344249807908) to #F7F7F7 [line: 1404]
Collision: #F1F1F1, #ECECEC
  - #F1F1F1 [line: 1270] is too close (1.0517928172323157) to #ECECEC [line: 1393]
Collision: #F1F1F1, #F7F7F7
  - #F1F1F1 [line: 1270] is too close (1.2352369577808568) to #F7F7F7 [line: 1404]
Collision: #ECECEC, #F7F7F7
  - #ECECEC [line: 1393] is too close (2.2868591207833133) to #F7F7F7 [line: 1404]

Beta phase evaluation

<!--Uncomment the relevant rows for the issue. -->

Proposed resolution

It seems like a lot, it's possible the default similarity threshold (3) is set too high.

As Seven has evolved over D8 with a new colour scheme, it's entirely possible there are some colour inconsistencies and overlaps. We should investigate this.

Remaining tasks

User interface changes

Maybe some colour tweaks

API changes

None

📌 Task
Status

Active

Version

2.0

Component

Code

Created by

🇬🇧United Kingdom lewisnyman Nomadic

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024