Git Product home page Git Product logo

Comments (7)

jancborchardt avatar jancborchardt commented on May 17, 2024

Good point!

So embarrassed I missed the empty alt tags for decorative images that I fixed it right away :O 8bf9fef
Also did a first compression of the project images.

WAVE has no other complaints for now, will go through it with Lighthouse tomorrow.

from opensourcediversity.org.

sleepypioneer avatar sleepypioneer commented on May 17, 2024

Dont panic, It will be something that needs checking at regular intervals. Colours can also be an issue it will probably not like the menu buttons contrast in the top nav.

from opensourcediversity.org.

22nds avatar 22nds commented on May 17, 2024

@sleepypioneer Checked the color contrast of background color #45B086 and white and the contrast ratio is only 2.69:1 - which fails WCAG.

Solution would be to make green darker (eg. #28624E) or color of the text black (which also means black background). I am in favour of darkening the green - but ultimately this is a design decision.

dark-green

The site itself could also benefit from greater line height and spacing between rows of elements.

from opensourcediversity.org.

sleepypioneer avatar sleepypioneer commented on May 17, 2024

Hi @22nds great to see you here! @jancborchardt is our design Guru so I will leave this to him, thanks for checking :)

from opensourcediversity.org.

jancborchardt avatar jancborchardt commented on May 17, 2024

I enhanced the readability a bit:

  • Added a slight text-shadow to the white text which on green
  • Made the navigation text fully opaque white by default
  • Added the hover/focus effect for the navigation links too
    screenshot from 2018-05-30 14-29-12

Changing the text/foreground color from white to dark definitely looks a bit negative (or what do you think?):
screenshot from 2018-05-30 14-53-33

Darkening the background color also makes it a bit gloomy, but maybe we need to find the correct balance there?

The site itself could also benefit from greater line height and spacing between rows of elements.

@22nds great point! Fixed it with e74222e

I’ll look into changing the Light & Semibold font combination to Regular & Bold for better readability.

from opensourcediversity.org.

jancborchardt avatar jancborchardt commented on May 17, 2024

Fonts are now changed to Regular & Bold, much better! :)

And a pull request with compressed images is at #16

from opensourcediversity.org.

jancborchardt avatar jancborchardt commented on May 17, 2024

Closing as we fixed the basic issues. If there’s stuff left or new things coming up, please open new issues! :)

from opensourcediversity.org.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.