From 7096b2c61dac9e0ad1425e6d6aaeaad4f9fbcf5d Mon Sep 17 00:00:00 2001 From: myst Date: Mon, 22 Dec 2025 23:11:31 +0100 Subject: [PATCH] feat(frontend): enhance terminal settings for WCAG AAA compliance with minimum contrast ratio fixes Discuss different Colors on different Background (black/white on whatever) Fixes #138 fixes xterm some strange grey and colours not sharp Fixes #154 --- README.md | 10 +++++++++- .../mud/components/mud-client/mud-client.component.ts | 5 ++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7a22f67..342331f 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,10 @@ Please note: most of these features have been tested against [UNItopia](https:// - ANSI support The received text is displayed with ANSI color codes, providing a colorful and user-friendly representation in the frontend. + Screen altering commands like Clear Screen are also supported + + The client applies a web-optimized ANSI color palette compliant with WCAG AAA. + Low-contrast foreground/background combinations are detected and corrected automatically to maintain readability. There is [work in progress](https://github.com/unitopia-de/webmud3/milestone/11). @@ -41,7 +45,11 @@ We are currently working on the following features: - GMCP Support - _Not planned yet_ + [Milestone](https://github.com/unitopia-de/webmud3/milestone/17) + +- Screenreader Support + + [Milestone](https://github.com/unitopia-de/webmud3/milestone/15) ## Deployments diff --git a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts index 5008698..ef00606 100644 --- a/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts +++ b/frontend/src/app/core/mud/components/mud-client/mud-client.component.ts @@ -145,9 +145,12 @@ export class MudClientComponent implements AfterViewInit, OnDestroy { constructor() { this.terminal = new Terminal({ fontFamily: 'JetBrainsMono, monospace', - theme: { background: '#000', foreground: '#ccc' }, disableStdin: false, screenReaderMode: true, + // This settings will adjust all colors to ensure sufficient contrast ratio for accessibility + // between text and background colors. This may alter the original color scheme. + // For more information, see: https://xtermjs.org/docs/api/terminal/interfaces/iterminaloptions/#optional-minimumcontrastratio + minimumContrastRatio: 7, // Default value for WCAG AAA compliance }); }