From eb8a0d30da0cc150e95d44bad998c13ee2defc25 Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Mon, 20 Jul 2026 18:16:01 -0500 Subject: feat(a11y): semantic colour system (#21 phase 1) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces every hard-coded colour with semantic asset colours that adapt to light, dark, and Increase Contrast. Dark mode stays locked, so this is a pure refactor: the audit reports the same findings before and after. The accent is now blue rather than cyan, per the tech/DNS theme. Why custom values rather than the system palette: every system colour fails WCAG AA in light mode. Measured on white — systemYellow 1.51:1, systemOrange 2.20:1, systemGreen 2.22:1, systemCyan 2.54:1, systemRed 3.55:1. All of them pass in dark mode, which is why the dark-locked app looked fine, and why unlocking light mode was never a matter of deleting .preferredColorScheme(.dark). Every new value clears 4.5:1 as text on its page, its card, and its own 16% badge tint — the way AppStatusBadgeView actually draws it. The accent needed splitting in two. As text on a dark background it must be light; as a fill behind a white label it must be dark. #4DA3FF reads 8.00:1 as text on black but 2.63:1 behind white text, so StatusInfo / AccentColor cover the foreground role and AccentFill covers .borderedProminent. AppOnAccent is the label colour for a solid fill and flips by scheme. Colours live in Shared/Colors.xcassets rather than the app catalog: the Shared folder is already a synchronized group in all three targets, so the widget and share extension pick the palette up with no project-file surgery. AccentColor stays in the app catalog as the global tint — and is now actually defined, having been an empty colorset that silently left system controls rendering in stock blue while custom chrome used cyan. Two deliberate visual changes: orange folds into StatusWarning and pink into StatusCritical. They encoded the same severity as the colours they now share, and both sites also carry a text label. Audit findings drop 15 to 14, and one of the originals turned out to be a phantom: the Inspect contrast failure was the Run button in its disabled state, which WCAG 1.4.3 exempts. testInspectScreen now types a domain first so the audit measures an enabled control. Findings also carry the offending element now, so the remaining clipped-text items name themselves ("No Portfolio Yet", "Search domains") instead of being anonymous. --- .../AccentFill.colorset/Contents.json | 78 ++++++++++++++++++++++ .../AppBackground.colorset/Contents.json | 38 +++++++++++ .../AppOnAccent.colorset/Contents.json | 38 +++++++++++ .../AppSeparator.colorset/Contents.json | 78 ++++++++++++++++++++++ .../AppSurface.colorset/Contents.json | 78 ++++++++++++++++++++++ .../AppSurfaceElevated.colorset/Contents.json | 78 ++++++++++++++++++++++ Shared/Colors.xcassets/Contents.json | 6 ++ .../StatusCritical.colorset/Contents.json | 78 ++++++++++++++++++++++ .../StatusInfo.colorset/Contents.json | 78 ++++++++++++++++++++++ .../StatusNeutral.colorset/Contents.json | 78 ++++++++++++++++++++++ .../StatusPositive.colorset/Contents.json | 78 ++++++++++++++++++++++ .../StatusWarning.colorset/Contents.json | 78 ++++++++++++++++++++++ 12 files changed, 784 insertions(+) create mode 100644 Shared/Colors.xcassets/AccentFill.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/AppBackground.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/AppOnAccent.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/AppSeparator.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/AppSurface.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/AppSurfaceElevated.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/Contents.json create mode 100644 Shared/Colors.xcassets/StatusCritical.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/StatusInfo.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/StatusNeutral.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/StatusPositive.colorset/Contents.json create mode 100644 Shared/Colors.xcassets/StatusWarning.colorset/Contents.json (limited to 'Shared/Colors.xcassets') diff --git a/Shared/Colors.xcassets/AccentFill.colorset/Contents.json b/Shared/Colors.xcassets/AccentFill.colorset/Contents.json new file mode 100644 index 0000000..ae20bb8 --- /dev/null +++ b/Shared/Colors.xcassets/AccentFill.colorset/Contents.json @@ -0,0 +1,78 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0x00", + "green": "0x00", + "blue": "0xFF", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x00", + "green": "0x40", + "blue": "0xDD", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x00", + "green": "0x00", + "blue": "0xCC", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + }, + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x00", + "green": "0x33", + "blue": "0xCC", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/AppBackground.colorset/Contents.json b/Shared/Colors.xcassets/AppBackground.colorset/Contents.json new file mode 100644 index 0000000..ac109ac --- /dev/null +++ b/Shared/Colors.xcassets/AppBackground.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0xFF", + "green": "0xFF", + "blue": "0xFF", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x00", + "green": "0x00", + "blue": "0x00", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/AppOnAccent.colorset/Contents.json b/Shared/Colors.xcassets/AppOnAccent.colorset/Contents.json new file mode 100644 index 0000000..ac109ac --- /dev/null +++ b/Shared/Colors.xcassets/AppOnAccent.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0xFF", + "green": "0xFF", + "blue": "0xFF", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x00", + "green": "0x00", + "blue": "0x00", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/AppSeparator.colorset/Contents.json b/Shared/Colors.xcassets/AppSeparator.colorset/Contents.json new file mode 100644 index 0000000..3f5960a --- /dev/null +++ b/Shared/Colors.xcassets/AppSeparator.colorset/Contents.json @@ -0,0 +1,78 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0xC6", + "green": "0xC6", + "blue": "0xC8", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x38", + "green": "0x38", + "blue": "0x3A", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0xA0", + "green": "0xA0", + "blue": "0xA3", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + }, + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x54", + "green": "0x54", + "blue": "0x56", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/AppSurface.colorset/Contents.json b/Shared/Colors.xcassets/AppSurface.colorset/Contents.json new file mode 100644 index 0000000..94ae3c7 --- /dev/null +++ b/Shared/Colors.xcassets/AppSurface.colorset/Contents.json @@ -0,0 +1,78 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0xF2", + "green": "0xF2", + "blue": "0xF7", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x0E", + "green": "0x0E", + "blue": "0x0F", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0xEB", + "green": "0xEB", + "blue": "0xF0", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + }, + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x16", + "green": "0x16", + "blue": "0x18", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/AppSurfaceElevated.colorset/Contents.json b/Shared/Colors.xcassets/AppSurfaceElevated.colorset/Contents.json new file mode 100644 index 0000000..775eafb --- /dev/null +++ b/Shared/Colors.xcassets/AppSurfaceElevated.colorset/Contents.json @@ -0,0 +1,78 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0xE5", + "green": "0xE5", + "blue": "0xEA", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x1A", + "green": "0x1A", + "blue": "0x1C", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0xDC", + "green": "0xDC", + "blue": "0xE1", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + }, + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x23", + "green": "0x23", + "blue": "0x26", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/Contents.json b/Shared/Colors.xcassets/Contents.json new file mode 100644 index 0000000..73c0059 --- /dev/null +++ b/Shared/Colors.xcassets/Contents.json @@ -0,0 +1,6 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Shared/Colors.xcassets/StatusCritical.colorset/Contents.json b/Shared/Colors.xcassets/StatusCritical.colorset/Contents.json new file mode 100644 index 0000000..8f97cd9 --- /dev/null +++ b/Shared/Colors.xcassets/StatusCritical.colorset/Contents.json @@ -0,0 +1,78 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0xB3", + "green": "0x26", + "blue": "0x1E", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0xFF", + "green": "0x69", + "blue": "0x61", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x8C", + "green": "0x1D", + "blue": "0x16", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + }, + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0xFF", + "green": "0x9A", + "blue": "0x94", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/StatusInfo.colorset/Contents.json b/Shared/Colors.xcassets/StatusInfo.colorset/Contents.json new file mode 100644 index 0000000..9d1e3b9 --- /dev/null +++ b/Shared/Colors.xcassets/StatusInfo.colorset/Contents.json @@ -0,0 +1,78 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0x00", + "green": "0x00", + "blue": "0xFF", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x4D", + "green": "0xA3", + "blue": "0xFF", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x00", + "green": "0x00", + "blue": "0xCC", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + }, + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x7F", + "green": "0xBF", + "blue": "0xFF", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/StatusNeutral.colorset/Contents.json b/Shared/Colors.xcassets/StatusNeutral.colorset/Contents.json new file mode 100644 index 0000000..9e7bb36 --- /dev/null +++ b/Shared/Colors.xcassets/StatusNeutral.colorset/Contents.json @@ -0,0 +1,78 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0x5A", + "green": "0x5A", + "blue": "0x5F", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0xA1", + "green": "0xA1", + "blue": "0xA6", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x3A", + "green": "0x3A", + "blue": "0x3C", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + }, + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0xC7", + "green": "0xC7", + "blue": "0xCC", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/StatusPositive.colorset/Contents.json b/Shared/Colors.xcassets/StatusPositive.colorset/Contents.json new file mode 100644 index 0000000..22ce5e5 --- /dev/null +++ b/Shared/Colors.xcassets/StatusPositive.colorset/Contents.json @@ -0,0 +1,78 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0x14", + "green": "0x6C", + "blue": "0x2E", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x30", + "green": "0xD1", + "blue": "0x58", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x0B", + "green": "0x50", + "blue": "0x23", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + }, + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x5B", + "green": "0xE5", + "blue": "0x84", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} diff --git a/Shared/Colors.xcassets/StatusWarning.colorset/Contents.json b/Shared/Colors.xcassets/StatusWarning.colorset/Contents.json new file mode 100644 index 0000000..cc79e86 --- /dev/null +++ b/Shared/Colors.xcassets/StatusWarning.colorset/Contents.json @@ -0,0 +1,78 @@ +{ + "colors": [ + { + "idiom": "universal", + "color": { + "color-space": "srgb", + "components": { + "red": "0x7A", + "green": "0x56", + "blue": "0x00", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0xFF", + "green": "0xD6", + "blue": "0x0A", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0x5C", + "green": "0x41", + "blue": "0x00", + "alpha": "1.000" + } + } + }, + { + "idiom": "universal", + "appearances": [ + { + "appearance": "luminosity", + "value": "dark" + }, + { + "appearance": "contrast", + "value": "high" + } + ], + "color": { + "color-space": "srgb", + "components": { + "red": "0xFF", + "green": "0xE5", + "blue": "0x66", + "alpha": "1.000" + } + } + } + ], + "info": { + "author": "xcode", + "version": 1 + } +} -- cgit v1.2.3