Skip to content

fix(frontend): address many color contrast a11y issues - #3965

Merged
mkurapov merged 2 commits into
mainfrom
sidvishnoi/a11y-color-contrast
Aug 11, 2026
Merged

fix(frontend): address many color contrast a11y issues#3965
mkurapov merged 2 commits into
mainfrom
sidvishnoi/a11y-color-contrast

Conversation

@sidvishnoi

@sidvishnoi sidvishnoi commented Aug 11, 2026

Copy link
Copy Markdown
Member

Changes proposed in this pull request

Address color contrast issues (most of them).

  • RadixUI orange theme does not pass WCAG guidelines in general. They use APCA (Inaccessible color combinations in light theme radix-ui/colors#41 (comment); that better algorithm will be part of WCAG3 later).
    • To pass compliance, change base theme from orange to amber, so we can pass most color issues in least effort (and not define own palette right now).
  • Update some badges to use outline variant. The soft doesn't pass WCAG contrast guidelines with amber either.
  • For some buttons, using classic variant - that uses shadows and adds contrast.

I could not think of a better style for Next/Prev pagination links - left them as is for now.

Context

Follow up of #3961

Checklist

  • Related issues linked using fixes #number
  • Tests added/updated
  • Make sure that all checks pass
  • Bruno collection updated (if necessary)
  • Documentation issue created with user-docs label (if necessary)
  • OpenAPI specs updated (if necessary)

@netlify

netlify Bot commented Aug 11, 2026

Copy link
Copy Markdown

Deploy Preview for brilliant-pasca-3e80ec canceled.

Name Link
🔨 Latest commit 30a680b
🔍 Latest deploy log https://app.netlify.com/projects/brilliant-pasca-3e80ec/deploys/6a7b150e8320190008625f86

@github-actions github-actions Bot added the pkg: frontend Changes in the frontend package. label Aug 11, 2026
@sidvishnoi

Copy link
Copy Markdown
Member Author

Example changes:

Before After
image image
image image

@github-actions

github-actions Bot commented Aug 11, 2026

Copy link
Copy Markdown

🚀 Performance Test Results

Test Configuration:

  • VUs: 4
  • Duration: 1m0s

Test Metrics:

  • Requests/s: 40.51
  • Iterations/s: 13.50
  • Failed Requests: 0.00% (0 of 2440)
📜 Logs

> performance@1.0.0 run-tests:testenv /home/runner/work/rafiki/rafiki/test/performance
> ./scripts/run-tests.sh -e test -k -q --vus 4 --duration 1m

Cloud Nine GraphQL API is up: http://localhost:3101/graphql
Cloud Nine Wallet Address is up: http://localhost:3100/
Happy Life Bank Address is up: http://localhost:4100/
cloud-nine-wallet-test-backend already set
cloud-nine-wallet-test-auth already set
happy-life-bank-test-backend already set
happy-life-bank-test-auth already set
     data_received..................: 881 kB 15 kB/s
     data_sent......................: 1.9 MB 31 kB/s
     http_req_blocked...............: avg=7.7µs    min=1.92µs   med=5.69µs   max=553.54µs p(90)=6.93µs   p(95)=7.64µs  
     http_req_connecting............: avg=799ns    min=0s       med=0s       max=461.42µs p(90)=0s       p(95)=0s      
     http_req_duration..............: avg=98.04ms  min=8.42ms   med=79.44ms  max=515.48ms p(90)=173.16ms p(95)=197.15ms
       { expected_response:true }...: avg=98.04ms  min=8.42ms   med=79.44ms  max=515.48ms p(90)=173.16ms p(95)=197.15ms
     http_req_failed................: 0.00%  ✓ 0         ✗ 2440
     http_req_receiving.............: avg=102.3µs  min=26.75µs  med=88.13µs  max=2.53ms   p(90)=128.6µs  p(95)=163.05µs
     http_req_sending...............: avg=42.52µs  min=8.98µs   med=27.6µs   max=2.5ms    p(90)=48.66µs  p(95)=67.28µs 
     http_req_tls_handshaking.......: avg=0s       min=0s       med=0s       max=0s       p(90)=0s       p(95)=0s      
     http_req_waiting...............: avg=97.89ms  min=8.23ms   med=79.3ms   max=515.34ms p(90)=173.05ms p(95)=196.81ms
     http_reqs......................: 2440   40.513846/s
     iteration_duration.............: avg=296.09ms min=195.52ms med=279.66ms max=1.03s    p(90)=377.83ms p(95)=404.49ms
     iterations.....................: 813    13.499081/s
     vus............................: 4      min=4       max=4 
     vus_max........................: 4      min=4       max=4 

@sidvishnoi
sidvishnoi marked this pull request as ready for review August 11, 2026 11:10
@JoblersTune

This comment was marked as resolved.

@mkurapov
mkurapov merged commit 9ebf092 into main Aug 11, 2026
38 of 58 checks passed
@mkurapov
mkurapov deleted the sidvishnoi/a11y-color-contrast branch August 11, 2026 13:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg: frontend Changes in the frontend package.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants