diff --git a/components/vf-logo/CHANGELOG.md b/components/vf-logo/CHANGELOG.md index 5e52fbf1db..d6f85ec827 100755 --- a/components/vf-logo/CHANGELOG.md +++ b/components/vf-logo/CHANGELOG.md @@ -1,3 +1,7 @@ +### 1.5.2 + +* Documentation : Updated documentation for vf-logo. [Tracking issue](https://github.com/visual-framework/vf-core/issues/1910) + ### 1.5.1 * Makes logo larger only when using extreme variant. diff --git a/components/vf-logo/README.md b/components/vf-logo/README.md index 8bf0c7d955..9e1254374d 100755 --- a/components/vf-logo/README.md +++ b/components/vf-logo/README.md @@ -6,6 +6,18 @@ A simple component to add the Visual Framework logo to a page. You'll likely want to use this one as a template to add your own logo. +## Usage + +This component allows you to add the vf-logo on your page. It can also serve as a template to add your own logo if it has a similar layout and design to the vf-logo. Before using it, ensure that your logo usage guidance and design layout do not conflict with the component. + +Considering that texts in logo’s are classified as [essential](https://www.w3.org/WAI/WCAG21/Understanding/images-of-text#dfn-essential), there are [no contrast requirements](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) for adding a logo. However, where possible, make sure the logo is clearly visible against the background colour. + +### Useful links + +* [Design resources - EMBL](https://www.embl.org/internal-information/communications/design-resources/#vf-tabs__section-logos) +* [Contrast (Minimum) (Level AA) - WCAG 2.1 Understanding Docs](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) +* [Images of Text (Level AA) - WCAG 2.1 Understanding Docs](https://www.w3.org/WAI/WCAG21/Understanding/images-of-text#dfn-essential) + ## Install This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-logo` with this command.