Skip to content

Add icon for NymVPN #3949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 6, 2025
Merged

Conversation

wilwarindi
Copy link
Contributor

@wilwarindi wilwarindi commented Feb 3, 2025

closes #3919, and adds symlinks for the Flatpak version

OG:
icon

New:
nym-vpn-app

@achadwick
Copy link
Contributor

Concept looks good to me. Visual contrast might improve with a lighter background or a darker foreground element: some icons go down to #3F3F3F for foreground elements (only). That said, the example under "New:" above passes WCAG AAA for large text at https://webaim.org/resources/contrastchecker/, as well as AA for graphical objects. Maybe my eyes are just glitching seeing it next to the higher contrast OG one!

There is a matrix transform in the 16px icon that need applying to the coordinates inside its group, and some misalignments around the shadows and highlights of the N. I'll have a go at fixing those later today, and hopefully I'll be able to update your branch for a quick check-in beoire merging.

@achadwick achadwick self-assigned this Feb 5, 2025
@wilwarindi
Copy link
Contributor Author

@achadwick I didn't know about the contrast checker site, thank you! I'll start using it now
I can check for the matrix transform and misalignments now and you can double check me after that

@wilwarindi
Copy link
Contributor Author

@achadwick I fixed the matrix transform (feel free to double-check). I also added a tiny bit more warmth (upped the red) to the green background color.

I didn't find any misalignment, but I might have missed something.

- Round a few numbers
- Fix some offset glitches
- Fix vertical foreground element centring on the 64px.
@achadwick
Copy link
Contributor

achadwick commented Feb 5, 2025

@wilwarindi It didn't need much, just alignment things. A couple of the highlights had just been copied and pasted at a different size without remaking it.

The foreground:background contrast ratio meets accessibility standards, but it could be improved to be just over 7.0 without being too far away. I actually used Gpick's LCH colour adjuster to avoid messing with the hue and saturation too much; not sure what WebAIM use!

#454545/#45CF7B (4.77:1) nym-vpn-app@64x64 nym-vpn-app@48x48 nym-vpn-app@32x32 nym-vpn-app@24x24 nym-vpn-app@22x22 nym-vpn-app@16x16 (unchanged)

#323232/#45CF7B (6.38:1) nym-vpn-app@64x64 nym-vpn-app@48x48 nym-vpn-app@32x32 nym-vpn-app@24x24 nym-vpn-app@22x22 nym-vpn-app@16x16 (fg- (darker))

#323232/#55DD87 (7.37:1) nym-vpn-app@64x64 nym-vpn-app@48x48 nym-vpn-app@32x32 nym-vpn-app@24x24 nym-vpn-app@22x22 nym-vpn-app@16x16 (fg-, bg+)

Perhaps I'm just oversensitive to black-on-midtone contrasts, but I think the last one is a real improvement without distorting the colours and design too much. The first one is quite a bare pass for AAA large text, and it feels it. The last one is AAA-rated for small text - small icon sizes - too. What do you think?

@achadwick
Copy link
Contributor

And aesthetically: does the background green look OK for the above, and not too acidic/bright on a dark background? I don't use a dark theme, so it'd be good if someone could check that.

@wilwarindi
Copy link
Contributor Author

I don't think it looks too bright, personally, but I don't know if the decision of the color is up to me.
Re: alignment, I thought I'd made each one from scratch for every icon size, but I might have missed something. I'm gonna go double check my other PRs.
Thank you for all you feedback and explanations, BTW!

@morganist
Copy link
Member

@achadwick @wilwarindi I think it looks nice on dark theme as well, the contrast improvements are nice

@achadwick
Copy link
Contributor

Thanks for the feedback. I'll go with #323232 on #55DD87 for now, and merge.

@achadwick achadwick merged commit 5dc793d into PapirusDevelopmentTeam:master Feb 6, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Icon request] NymVPN
3 participants